每个选项组中只有一个复选框可选

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()方法获取所有兄弟元素，或者您可以使用具有相同名称的单选按钮。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

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); 
    } 
});