jQuery对checkbox 复选框的全选全不选反选的操作

要实现对checkbox 复选框的全选、全不选、反选操作，可以使用jQuery实现。以下是jQuery对checkbox 复选框的全选、全不选、反选的操作攻略：

1.代码示例

1.1 全选、全不选

<div>
  <input type="checkbox" class="checkbox" name="checkAll" id="checkAll">
  <label for="checkAll">全选</label>
</div>
<div>
  <input type="checkbox" class="checkbox" name="item" value="1">
  <input type="checkbox" class="checkbox" name="item" value="2">
  <input type="checkbox" class="checkbox" name="item" value="3">
  <input type="checkbox" class="checkbox" name="item" value="4">
</div>

<script>
  $(function(){
    // 全选
    $("#checkAll").click(function(){
      $("input[name='item']").prop("checked",this.checked);
    });
    // 全不选
    $("input[name='item']").click(function(){
      var flag = true;
      $("input[name='item']").each(function(){
        if(!this.checked){
          flag = false;
        }
      });
      $("#checkAll").prop("checked",flag);
    });

  });
</script>

1.2 反选

<div>
  <input type="checkbox" class="checkbox" name="invertCheck" id="invertCheck">
  <label for="invertCheck">反选</label>
</div>
<div>
  <input type="checkbox" class="checkbox" name="item" value="1">
  <input type="checkbox" class="checkbox" name="item" value="2">
  <input type="checkbox" class="checkbox" name="item" value="3">
  <input type="checkbox" class="checkbox" name="item" value="4">
</div>

<script>
  $(function(){
    // 反选
    $("#invertCheck").click(function(){
      $("input[name='item']").each(function(){
        this.checked = !this.checked;
      });
    });

  });
</script>

2.具体步骤

2.1 实现全选、全不选

• 首先，我们需要为全选的checkbox和需要全选的checkbox分别添加id和name属性，以方便后续的操作；
• 接下来，添加点击事件，当全选的checkbox被选中时，使用jQuery选择器选择要全选的checkbox，设置它们的checked属性为true，即可实现全选；
• 当需要全选的checkbox被点击时，我们需要遍历所有的需要全选的checkbox，判断它们的checked属性是否为false，如果存在false，则不选中全选的checkbox；否则，全选的checkbox选中。

2.2 实现反选

• 首先，也需要为反选的checkbox和需要反选的checkbox分别添加id和name属性；
• 接下来，添加点击事件，使用jQuery选择器选择要反选的checkbox，遍历所有的checkbox，使用属性checked的反向操作符"!"来执行反选操作。

以上是jQuery对checkbox 复选框的全选、全不选、反选的操作攻略，希望能对你有所帮助。