08-jQuery-实现全选和全不选操作

可以通过设置 checkbox 的 checked 属性来实现。

假设我们有一组 checkbox 元素：

<input type="checkbox" name="select_all" id="select_all"> 全选
<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="peach"> Peach

首先，我们可以给全选的 checkbox 绑定一个点击事件，代码如下：

$('#select_all').click(function() {
  $('input[name="fruit"]').prop('checked', $(this).prop('checked'));
});

这里使用了 prop() 方法来设置 checkbox 的 checked 属性，如果全选的 checkbox 被选中了，则将所有的水果 checkbox 都选中，否则都不选中。

然后，我们还可以添加一个点击事件来监测所有的水果 checkbox 是否全部被选中，如果是，则自动将全选的 checkbox 选中，否则不选中。代码如下：

$('input[name="fruit"]').click(function() {
  var allChecked = true;
  $('input[name="fruit"]').each(function() {
    if (!$(this).prop('checked')) {
      allChecked = false;
      return false;
    }
  });
  $('#select_all').prop('checked', allChecked);
});

这里用到了 each() 方法遍历所有的水果 checkbox，然后判断是否全部被选中。如果有一个未被选中，则不是全部选中，将全选的 checkbox 取消选中；否则全部选中，将全选的 checkbox 选中。