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中的解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

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

如果我正确地理解了你的问题，你正在寻找类似的东西。

两个复选框作为一个

4 个答案: