jquery实现checkbox全选全不选的简单实例


<!DOCTYPE html>
<html>
<head>
    <title>Checkbox 全选全不选示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        // 点击全选框时
        $("#checkAll").click(function(){
            $(".item").prop('checked', $(this).prop('checked'));
        });

        // 单个checkbox状态改变时，检查是否需要取消全选框
        $(".item").click(function(){
            if($(".item:checked").length == $(".item").length){
                $("#checkAll").prop('checked', true);
            } else {
                $("#checkAll").prop('checked', false);
            }
        });
    });
    </script>
</head>
<body>

<input type="checkbox" id="checkAll"> 全选/全不选<br>
<input type="checkbox" class="item"> 选项1<br>
<input type="checkbox" class="item"> 选项2<br>
<input type="checkbox" class="item"> 选项3<br>

</body>
</html>

上述代码是一个使用jQuery实现的checkbox全选全不选的简单示例。其中，我们定义了一个全选框（`#checkAll`），以及几个具有`item`类的复选框（`.item`）。

- 当点击全选框时，会触发`click`事件，通过jQuery的`.prop()`方法将所有`.item`类的复选框的`checked`属性设置为与全选框相同的状态，实现全选或全不选。

- 当点击任意一个`.item`类的复选框时，同样触发`click`事件，并检查所有`.item`类的复选框中已选中的数量是否等于`.item`类的复选框总数。如果是，则将全选框的`checked`属性设置为`true`（全选）；如果不是，则设置为`false`（非全选）。