jQuery 点击全选 - 示例代码及实现原理

以下是使用 jQuery 实现点击全选的示例代码：

HTML 代码：

<input type='checkbox' id='check-all'>全选
<input type='checkbox' name='item[]' value='1'>选项1
<input type='checkbox' name='item[]' value='2'>选项2
<input type='checkbox' name='item[]' value='3'>选项3

jQuery 代码：

$(function(){
  // 点击全选
  $('#check-all').click(function(){
    $('input[name="item[]"]').prop('checked', this.checked);
  });
  
  // 点击单个选项
  $('input[name="item[]"]').click(function(){
    var checked = $('input[name="item[]"]:checked').length;
    var total = $('input[name="item[]"]').length;
    $('#check-all').prop('checked', checked == total);
  });
});

说明：

1. 全选的复选框的 id 为 'check-all'，需要给每个选项添加 name 属性为 'item[]'。
2. 点击全选时，使用 prop() 方法将所有选项的 checked 属性设置为全选的复选框的 checked 属性。
3. 点击单个选项时，使用 prop() 方法获取已选中的选项数量和总选项数量，如果已选中的数量等于总数量，则将全选的复选框的 checked 属性设置为 true，否则设置为 false。