jQuery实现checkbox全选功能完整实例

jQuery是一个JavaScript库，提供了在HTML文档中选择DOM元素、处理事件、创建动画等功能。其中，jQuery实现Checkbox全选功能是一个常见的应用场景。下面是具体的攻略：

1. HTML结构

在HTML中，需要定义多个Checkbox元素，以及一个控制所有Checkbox全选操作的Checkbox元素。

<label><input type="checkbox" class="check-all">全选</label>
<br>
<label><input type="checkbox" class="check-item">选项1</label>
<label><input type="checkbox" class="check-item">选项2</label>
<label><input type="checkbox" class="check-item">选项3</label>
<label><input type="checkbox" class="check-item">选项4</label>

可以看到，HTML结构中包含了一个class为"check-all"的全选Checkbox元素，以及一组class为"check-item"的子Checkbox元素。

2. jQuery实现全选

使用jQuery库实现全选的方法如下：

$(".check-all").click(function() {
  $(".check-item").prop("checked", $(this).prop("checked"));
});

解释一下代码。首先使用$(".check-all")来获取全选的Checkbox元素，使用.click()方法来绑定点击事件。当点击全选的Checkbox时，使用另一个jQuery方法.prop()将所有子Checkbox的"checked"属性设置为全选的Checkbox的"checked"属性值。这里使用$(this).prop("checked")获取全选的Checkbox的当前状态值。

3. jQuery实现子Checkbox选中自动勾选全选

当使用者手动勾选或取消子Checkbox时，我们还需要自动同步全选Checkbox的状态。实现代码如下：

$(".check-item").click(function() {
  if ($(this).prop("checked") === false) {
    $(".check-all").prop("checked", false);
  } else {
    if ($(".check-item:checked").length === $(".check-item").length) {
      $(".check-all").prop("checked", true);
    }
  }
});

解释一下代码。首先使用$(".check-item")来获取所有子Checkbox元素，使用.click()方法绑定点击事件。当点击子Checkbox时，使用if进行判断。如果当前子Checkbox的"checked"属性为false，则需要取消全选Checkbox的勾选状态；如果当前子Checkbox的"checked"属性为true，则需要判断当前选中的子Checkbox数量是否等于所有子Checkbox的数量，如果是，则勾选全选的Checkbox。

示例1：代码演示

示例2：

<form>
  <label><input type="checkbox" class="check-all">全选</label>
  <br>
  <label><input type="checkbox" class="check-item">选项1</label>
  <label><input type="checkbox" class="check-item">选项2</label>
  <label><input type="checkbox" class="check-item">选项3</label>
  <label><input type="checkbox" class="check-item">选项4</label>
</form>

$(".check-all").click(function() {
  $(".check-item").prop("checked", $(this).prop("checked"));
});

$(".check-item").click(function() {
  if ($(this).prop("checked") === false) {
    $(".check-all").prop("checked", false);
  } else {
    if ($(".check-item:checked").length === $(".check-item").length) {
      $(".check-all").prop("checked", true);
    }
  }
});

以上就是使用jQuery实现Checkbox全选功能的完整攻略。