每個選項組中只有一個複選框可選

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