javascript - HTML 更改单选按钮背景

Question

我希望 foreach 的背景颜色保持不变 <ul>作为浅灰色。
当前单击单选按钮时，它会错误地更改 ul 背景。我不知道如何通过所有可用的 ul 使 jquery 脚本循环，如果脚本可以很小，我真的很感激，因为这个概念将应用于 100+ ul

$(document).ready(function() {
   $("ul.options-list li").on("click",function() {
            if($(this).find('input[type="radio"]').is(':checked')) { 
          $('ul.options-list li').removeClass('change_color');
          $(this).addClass('change_color');
        }
    });
});

ul.options-list li.change_color{
        background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Q1
  <ul class="options-list">
    <li>
        <input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
    </li>
    <li>
        <input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
    </li>
  </ul>
</div>


<div>
  Q2
  <ul class="options-list">
    <li>
        <input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
    </li>
    <li>
        <input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
    </li>
  </ul>
</div>

Answer 1

您可以遍历您的 ul li使用 each循环然后使用 $(this)根据此检查 radio 是否已检查 add或 remove你的类。
演示代码 :

$(document).ready(function() {
  $("ul.options-list li").on("click", function() {
  //loop through ul li 
    $("ul.options-list li").each(function() {
      if ($(this).find('input[type="radio"]').is(':checked')) {
        $(this).addClass('change_color');//add change_Color
      } else {
        $(this).removeClass('change_color');//remove same
      }
    })
  });
});

ul.options-list li.change_color {
  background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  Q1
  <ul class="options-list">
    <li>
      <input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
    </li>
    <li>
      <input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
    </li>
  </ul>
</div>


<div>
  Q2
  <ul class="options-list">
    <li>
      <input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
    </li>
    <li>
      <input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
    </li>
  </ul>
</div>