兩個復選框合而為一

Question

我在頁面上有兩個復選框，我希望它們僅充當一個復選框。 例如，我選擇一個，另一個被自動選擇，反之亦然。 我設法一次選擇了這兩個選項，但似乎無法找出一種立即取消選擇它們的方法。

最讓我困擾的是，這可能是我根本不記得的超簡單代碼行。

有沒有辦法做到這一點？

Answer 1

這是您要找的東西嗎？

$(".test").change(function () {
    $(".test").attr("checked", this.checked);
  });

<input type='checkbox' class='test'>A<br />
<input type='checkbox' class='test'>B<br />

Answer 2

這是純JavaScript的解決方案：

 // Select all checkboxes using `.checkbox` class var checkboxes = document.querySelectorAll('.checkbox'); // Loop through the checkboxes list checkboxes.forEach(function (checkbox) { // Then, add `change` event on each checkbox checkbox.addEventListener('change', function(event) { // When the change event fire, // Loop through the checkboxes list and update the value checkboxes.forEach(function (checkbox) { checkbox.checked = event.target.checked; }); }); }); 

 <label><input type="checkbox" class="checkbox"> Item 1</label> <br> <label><input type="checkbox" class="checkbox"> Item 2</label> 

Answer 3

 $(document).ready(function() { $('#check_one').change(function() { $('#check_two').prop('checked', $('#check_one').prop('checked')); }); $('#check_two').change(function() { $('#check_one').prop('checked', $('#check_two').prop('checked')); }); }); 

 <form> <label>Simple checkbox</label> <input type="checkbox" id="check_one" /> <label>Complicated checkbox</label> <input type="checkbox" id="check_two" /> </form> 

假設您有兩個復選框的名稱不同，但協同工作，則此代碼將起作用

Answer 4

HTML：

<input type="checkbox" id="1" class="handleAsOne">
<input type="checkbox" id="2" class="handleAsOne">

javascript（jquery）：

$('.handleAsOne').on('change'){
   $('.handleAsOne').prop('checked', false);
   $(this).prop('checked', true);
}

如果我正確理解了您的問題，那么您正在尋找這樣的東西。