jquery复选框全选/取消示例


<!DOCTYPE html>
<html>
<head>
    <title>jQuery 复选框全选/取消示例</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<input type="checkbox" id="master"> 全选/取消全选<br>
<input type="checkbox" class="item"> 项目 1<br>
<input type="checkbox" class="item"> 项目 2<br>
<input type="checkbox" class="item"> 项目 3<br>

<script>
$(document).ready(function(){
    // 当点击全选框时
    $("#master").click(function(){
        $(".item").prop('checked', $(this).prop('checked'));
    });

    // 当点击任何一个子复选框时，检查是否应该勾选全选框
    $(".item").click(function(){
        if($(".item:checked").length == $(".item").length){
            $("#master").prop('checked', true);
        } else {
            $("#master").prop('checked', false);
        }
    });
});
</script>

</body>
</html>

这段代码展示了如何使用jQuery来实现复选框的全选和取消全选功能。它包含了一个主复选框（全选框）和几个子复选框。点击全选框会改变所有子复选框的选中状态，而点击任何一个子复选框时，会根据子复选框的选中情况来更新全选框的选中状态。