jQuery 复选框更改事件

在网页中，复选框是一种非常常见的元素，用户可以通过勾选或取消勾选复选框来完成一些操作。在使用jQuery的时候，我们可以使用其提供的事件来监听复选框的更改事件，从而完成一些操作。

监听复选框更改事件

我们可以使用 change() 方法来监听复选框的更改事件：

$("input[type='checkbox']").change(function() {
  // 执行操作
});

以上代码将监听文档中所有类型为复选框的元素的更改事件，当用户操作复选框时，绑定的函数将会被执行。

获取复选框状态

在处理复选框事件的时候，我们经常需要获取复选框的当前状态（即是否勾选）。我们可以使用 prop() 方法来获取复选框的状态：

$("input[type='checkbox']").change(function() {
  if ($(this).prop("checked")) {
    // 复选框被勾选
  } else {
    // 复选框被取消勾选
  }
});

以上代码中，我们在更改事件中获取了当前复选框的状态，如果当前复选框被勾选，我们将执行相应的操作，否则执行其他操作。

实例 - 全选/全不选

一个常见的应用场景是，页面上有一组复选框，我们希望可以通过一个全选/全不选的按钮来控制这组复选框的状态。我们可以使用以下代码来完成这个功能：

<label><input type="checkbox" id="chkAll">全选/全不选</label>
<br>
<label><input type="checkbox" class="chkItem">复选框1</label>
<label><input type="checkbox" class="chkItem">复选框2</label>
<label><input type="checkbox" class="chkItem">复选框3</label>

$("#chkAll").change(function() {
    $(".chkItem").prop("checked", $(this).prop("checked"));
});

$(".chkItem").change(function() {
    $("#chkAll").prop("checked", $(".chkItem:checked").length == $(".chkItem").length);
});

以上代码中，我们首先监听了全选/全不选按钮的更改事件，当用户勾选该复选框时，我们将所有的复选框都勾选上。然后我们监听了每个复选框的更改事件，当用户勾选或取消勾选某个复选框时，我们将重新计算当前勾选的复选框数量，如果数量和复选框总数相等，则表示所有复选框都被勾选。此时我们将全选/全不选按钮的状态改为已勾选。