jQuery实现全选按钮

针对“jQuery实现全选按钮”的问题，以下是完整的攻略：

1. 给全选按钮添加点击事件

我们可以给全选按钮（通常是一个复选框）添加一个点击事件，当它被点击时，它所对应的所有子项复选框都被选中或取消选中。这里我们使用 jQuery 的 click() 方法来监听点击事件。

$("全选按钮的ID").click(function(){
  $("子项复选框的选择器").prop('checked', $(this).prop('checked'));
});

以上代码中，我们首先使用了 $(this) 来获取当前点击的全选按钮，在 click() 方法中使用 prop() 方法来设置所有子项复选框是否选中。

2. 子项复选框状态控制全选按钮

为了避免全选按钮和子项复选框的状态不同步，我们需要在选中或取消选中子项复选框时同步更新全选按钮的状态，代码如下：

$("子项复选框的选择器").click(function(){
  var allChecked = true;
  $("子项复选框的选择器").each(function(){
    if(!$(this).prop('checked')){
      allChecked = false;
      return false; // 终止each遍历
    }
  });

  $("全选按钮的ID").prop('checked', allChecked);
});

以上代码中，我们遍历所有子项复选框，如果其中有任意一个未被选中，则说明不是所有子项复选框都被选中。我们使用全选按钮的 prop() 方法来设置其选中状态，根据是否所有子项复选框都被选中，分别设置其为选中状态或取消选中状态。

示例说明

以下示例演示了如何使用以上代码来实现全选按钮：

<input id="checkAll" type="checkbox">全选<br>
<input class="checkItem" type="checkbox">选项1<br>
<input class="checkItem" type="checkbox">选项2<br>
<input class="checkItem" type="checkbox">选项3<br>
<input class="checkItem" type="checkbox">选项4<br>

$("#checkAll").click(function(){
  $(".checkItem").prop('checked', $(this).prop('checked'));
});

$(".checkItem").click(function(){
  var allChecked = true;
  $(".checkItem").each(function(){
    if(!$(this).prop('checked')){
      allChecked = false;
      return false;
    }
  });
  $("#checkAll").prop('checked', allChecked);
});

以上示例中，我们给全选按钮设置了ID为 checkAll，并给每一个子项复选框添加class为 checkItem。当点击全选按钮时，所有子项复选框都被设置为选中或取消选中状态；当点击任意一个子项复选框时，会根据所有子项复选框的状态来同步更新全选按钮的状态。