Question

抱歉重复的问题。我发现有很多关于这个主题的问题，但这些对我没有帮助。我有几组复选框。

<div class="options">
   <input class="option" type="checkbox">
   <input class="option" type="checkbox">
   <input class="option" type="checkbox">
</div>

<div class="options">
   <input class="option" type="checkbox">
   <input class="option" type="checkbox">
   <input class="option" type="checkbox">
</div>

<div class="options">
   <input class="option" type="checkbox">
   <input class="option" type="checkbox">
   <input class="option" type="checkbox">
</div>
...
...

我想只能从每个组中选择一个复选框。我尝试过使用jQuery，但它适用于每个复选框，而不适用于单独的复选框组。

  $('body').on('change','.option', function() {
        $('.option').not(this).prop('checked', false);
    });

使用此

进行另一次尝试

 $('body').on('change','.option', function() {
    $(this).parent('.options').find('.option').prop('checked', false);
    $(this).prop('checked', true);
  });

但没有人能解决我的目的。请帮忙。

Answer 1

使用siblings()方法获取所有兄弟元素，或者您可以使用相同名称的单选按钮。

<h2 id="ranking"></h2>
<p id="description">
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Ex suscipit provident mollitia accusamus dolorem, vitae officiis eum
    temporibus.
</p>
<img id="badge" src="/img/national-universities-badge.svg" alt=""/><br>
<button id="button" onclick="toggleData()">Toggle Ranking List</button>

 $('body').on('change', '.option', function() {
   $(this).siblings().prop('checked', false);
 });

Answer 2

更好的方法是使用单选按钮，并为它们提供相同的名称。

<div class="options">
   <input name="myname" class="option" type="radio">
   <input name="myname" class="option" type="radio">
   <input name="myname" class="option" type="radio">
</div>

Answer 3

$(":checkbox").change(function () {
    if ($(this).is(":checked"))
    {
        $(this).siblings(":checkbox").prop("checked", false);
    }
});

每个选项组只能选择一个复选框

3 个答案: