javascript - HTML 更改单选按钮背景

Question

我希望 foreach <ul> 的背景颜色保持不变浅灰色。

目前点击单选按钮时，会错误地改变ul背景。我不知道如何使 jquery 脚本循环遍历所有可用的 ul，如果脚本可以很小，我将非常感激，因为这个概念将应用于 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

您可以使用 each 循环遍历您的 ul li，然后使用 $(this) 检查是否根据此检查 radio 添加或删除您的类(class)。

演示代码:

$(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>