两个复选框作为一个

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

如果我正确理解了你的问题，你正在寻找这样的东西。