2個複選框，當我取消選中一個時，我希望另一個被選中

Question

我有種工作方式，但它只能工作一次。我檢查第一個盒子，然後取消選中它和其他盒子檢查，但是當我再次檢查並取消選中第一個盒子時，它不起作用。

這將基本上像一個單選按鈕，但第二個複選框將被隱藏，所以他們只需要檢查或取消選中第一個框。

這裏是我的代碼：

$('input').on('change', function() { 
 
    $(this).siblings().attr('checked', false); 
 
    if ($(this).prop('checked') == false) { 
 
    $(this).siblings().attr('checked', true); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" /> 
 
<input type="checkbox" />

Answer 1

你的情況的問題是，你使用的.attr()方法來改變同級複選框元素的checked屬性。由於您要更改屬性，因此只能使用一次。如果將其更改爲.prop()，它應該按預期工作。

更簡單的方法是根據是否選中當前複選框來切換兄弟元素的checked屬性。你可以簡單地在你的情況下使用!this.checked：

$('input').on('change', function() { 
 
    $(this).siblings().prop('checked', !this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" /> 
 
<input type="checkbox" />