将两个复选框绑定在一起

Binding two checkboxes together

本文关键字：复选框 绑定 在一起 两个      更新时间：2023-09-26

我有两个复选框

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

和

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

是否可以将这两个复选框连接起来，这样无论一个复选框的"checked"属性发生什么，另一个也会发生什么？它需要为工作

  1. 用户更改检查状态

  2. 某些javascript函数更改检查状态

我的实际例子非常复杂，有很多复选框。因此，我正在寻找一种解决方案，在这种解决方案中，我可以确定两个复选框之间的连接，而不必再考虑它。谢谢carl

当然可以，但如果它们的行为相同，为什么要有两个复选框？也许一个复选框会更方便。：）

不管怎样，有了一个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">

您可以在复选框上绑定一个更改事件处理程序，并根据更改的复选框的值设置其他复选框的数值。

$(function() {
  $(".checkbox_class").change(function() {
    var x = this.checked;
    $(".checkbox_class").prop("checked", x);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checkbox1 checkbox_class" type="checkbox" name='1' id="example1" value="example1" />
<input class="checkbox2 checkbox_class" type="checkbox" name='2' id="example2" value="example2" />

它可以绑定以更改或单击事件

$("#example1").click(function (){
    $("#example2").click();
});
$("#example2").click(function (){
    $("#example1").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="checkbox1" type="checkbox" name='1' id="example1" value="example1"/> 
<input class="checkbox2" type="checkbox" name='2' id="example2" value="example2"/>

相关文章：