将两个复选框绑定在一起

Question

我有两个复选框

<input class="checkbox1" type="checkbox" name='1' id="example1" value="example1"/> 

和

<input class="checkbox2" type="checkbox" name='2' id="example2" value="example2"/>

是否可以连接这两个复选框,以便一个复选框的"已检查"属性发生的任何事情也会发生在另一个复选框上？它需要努力

1. 用户更改已检查状态

2. 一些javascript函数会更改已检查的状态

我的实际例子非常复杂,并且有很多复选框.所以我正在寻找一个解决方案,我可以确定两个复选框之间的连接,而不必再考虑它.谢谢卡尔

Answer 1

当然有可能,但如果它们的行为相同,为什么你会有两个复选框呢？也许一个复选框会更方便.:)

好吧,无论如何,使用一个jQuery,这应该工作正常.此代码段允许您为复选框指定一个组,因此它会自动选择同一组中的其他组.

当然,您可以轻松地将其更改为ID列表,例如,因此行为不需要两种方式,但我无法从您的问题中完全推断出您需要什么.无论如何,添加额外的复选框只需要它们具有正确的属性.

因为它以on这种方式使用函数,所以它甚至可以用于动态添加的复选框.

$(document).on('click', 'input[type="checkbox"][data-group]', function(event) {
  // The checkbox that was clicked
  var actor = $(this);
  // The status of that checkbox
  var checked = actor.prop('checked');
  // The group that checkbox is in
  var group = actor.data('group');
  // All checkboxes of that group
  var checkboxes = $('input[type="checkbox"][data-group="' + group + '"]');
  // All checkboxes excluding the one that was clicked
  var otherCheckboxes = checkboxes.not(actor);
  // Check those checkboxes
  otherCheckboxes.prop('checked', checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" data-group="group1">
<input type="checkbox" data-group="group2">
<input type="checkbox" data-group="group3">
<input type="checkbox" data-group="group1">
<input type="checkbox" data-group="group2">
<input type="checkbox" data-group="group3">
<input type="checkbox" data-group="group1">