操作元素之表单全选取消全选案例

最新推荐文章于 2025-05-21 09:23:18 发布

11路的卷尺

最新推荐文章于 2025-05-21 09:23:18 发布

阅读量497

点赞数

CC 4.0 BY-SA版权

分类专栏：基础练习文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_72711350/article/details/128889696

基础练习专栏收录该内容

22 篇文章

订阅专栏

该文章提供了一个使用JavaScript实现全选和取消全选功能的代码案例。通过监听全选按钮的点击事件，动态更新所有子复选框的选中状态。同时，当子复选框的状态改变时，会检查是否所有复选框都被选中，以更新全选按钮的状态。初始状态下，所有复选框默认未选中。

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

业务需求： 1. 点击上面全选复选框，下面所有的复选框都选中（全选） 2. 再次点击全选复选框，下面所有的复选框都不中选（取消全选） 3. 如果下面复选框全部选中，上面全选按钮就自动选中 4. 如果下面复选框有一个没有选中，上面全选按钮就不选中 5. 所有复选框一开始默认都没选中状态

案例分析

① 全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可

② 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都

要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。

③ 可以设置一个变量，来控制全选是否选中

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        tr,
        th,
        td {
            border: 1px solid red;
            border-collapse: collapse;
        }
    </style>

</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="all"></th>

                <th>名称</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody id="alls">
            <tr>
                <td><input type="checkbox"></td>
                <td>苹果</td>
                <td>3600</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>苹果</td>
                <td>3600</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>苹果</td>
                <td>2300</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>
    <script>
        /*  1. 全选和取消全选做法：  让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 */
        // 注册事件，处理程序
        var all = document.getElementById('all');    // 全选按钮
        var single = document.getElementById('alls').getElementsByTagName('input');  // 下面所有的复选框
        all.onclick = function () {
            //  this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中

            console.log(this.checked);
            for (var i = 0; i < single.length; i++) {
                single[i].checked = this.checked;
            }
        }
        /* 2，下面的按钮决定上面的全选按钮是否选中 */
        for (var i = 0; i < single.length; i++) {
            single[i].onclick = function () {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < single.length; i++) {
                    if (!single[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
                    }
                }
            }
            all.checked = flag;
        }


    </script>
</body>

</html>