通过 jquery 或 js 更改单选按钮的背景颜色

Question

我正在开发在线 mcq 平台。 我正在打印 php 的问题和选项收音机。 现在我想要一个功能，其中在单击单选按钮的每个问题上，与该 div 对应的按钮都会更改其背景颜色。 这样用户就可以知道他已经完成和完成了哪个问题，以及剩下哪个问题需要尝试 左边。

这是我的 HTML

<section class="solve">
<div class="container">
  <div class="row">
    <div class="col-md-8">
        <form id="gi" method="post" action="checkAnswer.php">

      <?php
      foreach ($json_data as $key => $value) {
          echo
          "<p><span class='que'> Question</span>&nbsp;&nbsp". $value['number']."&nbsp;&nbsp". "<br><hr class='line'>". $value['question']."<br><br>".
          "<pre>"."<input type='radio'  name='question" . $value['number']."' value='op1' required>" ." " , $value['op1']."</pre>".
          "<pre>"."<input type='radio' name='question" . $value['number']."' value='op2' required>" ." " , $value['op2']."</pre>".
          "<pre>"."<input type='radio' name='question" . $value['number']."' value='op3' required>"." "  , $value['op3']."</pre>".
          "<pre>"."<input type='radio' name='question" . $value['number']."' value='op4' required>"." " , $value['op4']."</pre>".
          "<pre>"."<input type='radio' name='question" . $value['number']."' value='0' required>"."LEAVE QUESTION"."</pre>".

              "</p>";
      }
      ?>
      <input class="submitBtn" type="submit" name="submit" value="SUBMIT">
      <!-- <button onclick="handleClick()">click</button> -->
       </form>
    </div>
    <div class="col-md-4 text-right">
        <div class="sidebar">

           <?php
      foreach ($json_data as $key => $value) {
          echo   " <button type='button' class='btn btn-primary btn-circle btn-sm' id=''question" . $value['number']."'>". $value['number']."</button>";
      }
      ?>
           </div>
        </div>
    </div>
  </div>
</div>
</section>

Answer 1

你可以试试这段代码。 添加它以提交事件或更改单选按钮的事件。

jQuery("input[type='radio']:checked").each(function(){
    let name = jQuery(this).attr("name");
    jQuery("#"+name).addClass("solved");
})