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

Question

I am developing online mcq platform. I am printing Question and option radios by php. Now i wanted a feature in which On every question whose radio button is clicked, the button corresponding to that div changes its background color. So that user may know which question he have and done and which question is left and need to attempt left.

THIS IS MY 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

You can try this code. Add it to submit event or change event for radio buttons.

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