checkbox 一键全选与取消全选

最新推荐文章于 2023-08-16 21:46:38 发布

原创最新推荐文章于 2023-08-16 21:46:38 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #html

html 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了一个使用jQuery实现的checkbox全选和取消全选的功能。通过设定相同name的checkbox并监听change事件，当全选checkbox被选中时，所有相同name的checkbox会被选中；反之，如果某个checkbox被取消，全选checkbox也将取消选中。提供了一个完整的HTML代码示例以供测试和理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jquery实现的一个checkbox一键全选小Demo，能够一键全选，也能够一键取消全选（都选中的情况下才能一键取消全选），如果全选状态下某个checkbox取消勾选，一键全选checkbox也会被取消。个人感觉这个小Demo通用性很好。

先附上我的小Demo代码（为了方便测试查看效果，我直接将整个html文档代码copy过来了）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <ul id="check-list">
        <li>
            <input type="checkbox" name="checkbox-item">Item1
        </li>
        <li>
            <input type="checkbox" name="checkbox-item">Item2
        </li>
        <li>
            <input type="checkbox" name="checkbox-item">Item3
        </li>
        <li>
            <input type="checkbox" name="checkbox-item">Item4
        </li>
        <li>
            <input type="checkbox" name="checkbox-item">Item5
        </li>
        <li>
            <input type="checkbox" name="checkbox-item">Item6
        </li>
    </ul>
    <div>
        <input type="checkbox" id="check-all">全选
    </div>
</body>
<script>
    var checkBoxItemNum = $("#check-list").find(
        "input[name='checkbox-item']"
    ).length;
    $("#check-all").change(function () {
        if ($(this).prop("checked") == true) {
            $("#check-list")
                .find("input[name='checkbox-item']")
                .prop("checked", true);
        } else {
            $("#check-list")
                .find("input[name='checkbox-item']")
                .prop("checked", false);
        }
    });
    $("#check-list")
        .find("input[name='checkbox-item']")
        .change(function () {
            if (
                $("#check-list").find(
                    "input[name='checkbox-item']:checked"
                ).length == checkBoxItemNum
            ) {
                $("#check-all").prop("checked", true);
            } else {
                $("#check-all").prop("checked", false);
            }
        });
</script>
</html>

主要思想（属性、事件皆为jquery）：

给每个需要参加全选的input[type='checkbox']设定一个相同的name, 然后记录这些相同name的checkbox的数量checkBoxItemNum
监听全选checkbox的change事件，给它加处理函数：如果当前状态为checked（prop("checked") 值为true），则将name相同的那些checkbox状态设置为checked（prop("checked")的值设置为true），反之prop("checked")的值设置为为false
监听每个checkbox的change事件，如果有某个checkbox状态改变，则对比现在选中的checkbox数量与所有的checkbox数量checkBoxItemNum，如果不相同，则说明没有全选中，此时需要将全选checkbox 的prop("checked") 值为false。

我的语言描述大概就是这样，建议最好看代码，看完就有一目了然的感觉。