JS实现表单复选框的全选和取消

最新推荐文章于 2022-10-18 18:38:29 发布

Kong_十六

最新推荐文章于 2022-10-18 18:38:29 发布

阅读量3.9k

点赞数 8

分类专栏： # 练习实例 # Javascript基础

本文链接：https://blog.csdn.net/qq_42383764/article/details/104760830

版权

Javascript基础同时被 2 个专栏收录

34 篇文章 2 订阅

订阅专栏

练习实例

21 篇文章 0 订阅

订阅专栏

单纯的想把案例放上来

需求一：点击全选按钮，下面的选项按钮全部选中或全取消

需求二：只要下面四个按钮都选中了，全选按钮也被选中

主要思路：

主要是有两个事件，一是针对全选按钮，二是针对全选按钮下面的小按钮

全选按钮点击事件实现：点击可以全选下面的按钮或全取消下面的按钮

小按钮点击事件实现：当四个按钮都被选中时，全选按钮会自动被选中，只要有一个按钮没有选中

全选按钮就不会被选中

小按钮事件的核心点：是一组事件

首先：需要循环注册事件

然后：每点击一个按钮都需要检测所有的小按钮是否被全选中，如果是，则全选按钮选中，如果有一个没有选中，全选按钮就不选中

js部分：

    <script>
        // 获取事件源
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var btns = document.getElementById('j_tb').querySelectorAll('input');

        // 注册事件1，点击全选按钮，下面的所有按钮的状态跟随全选按钮的状态
        j_cbAll.onclick = function () {
            // tbody里面的每一个按钮都被选中 for循环每个
            for (var i = 0; i < btns.length; i++) {
                btns[i].checked = j_cbAll.checked;
            }
        }
        // 注册事件2，小按钮点击事件
        for (var i = 0; i < btns.length; i++) {
            // 每个按钮在点击时都要循环检测是否四个按钮都是被选中
            btns[i].onclick = function () {
                var flag = false; // 检测全选按钮的状态 默认没有选中
                for (var i = 0; i < btns.length; i++) {
                    // 4个按钮中有一个没选择
                    if (!btns[i].checked) {
                        // 也可以不用设置变量检测 只要有一个没有选中 就可以置为flas 否则为ture
                        // 使用if eles 语句
                        // j_cbAll.checked = false;
                        flag = false;
                        break;
                    }
                }
                // 检测完之后，设置全选按钮的状态
                j_cbAll.checked = flag;
            }
        }
    </script>

效果：全选时

木有选完时：

全部代码：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>全选和全取消</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        

        // 获取事件源
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var btns = document.getElementById('j_tb').querySelectorAll('input');

        // 注册事件1，点击全选按钮，下面的所有按钮的状态跟随全选按钮的状态
        j_cbAll.onclick = function () {
            // tbody里面的每一个按钮都被选中 for循环每个
            for (var i = 0; i < btns.length; i++) {
                btns[i].checked = j_cbAll.checked;
            }
        }
        // 注册事件2，小按钮点击事件
        for (var i = 0; i < btns.length; i++) {
            // 每个按钮在点击时都要循环检测是否四个按钮都是被选中
            btns[i].onclick = function () {
                var flag = false; // 检测全选按钮的状态 默认没有选中
                for (var i = 0; i < btns.length; i++) {
                    // 4个按钮中有一个没选择
                    if (!btns[i].checked) {
                        // 也可以不用设置变量检测 只要有一个没有选中 就可以置为flas 否则为ture
                        // 使用if eles 语句
                        // j_cbAll.checked = false;
                        flag = false;
                        break;
                    }
                }
                // 检测完之后，设置全选按钮的状态
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>

</html>