javascript - 将两个复选框绑定(bind)在一起

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">