全选/部分选按钮

最新推荐文章于 2024-04-23 00:46:44 发布

lxl211

最新推荐文章于 2024-04-23 00:46:44 发布

阅读量144

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lxllxl211/article/details/127714479

版权

样式：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            margin: 100px auto;
            width: 400px;
            height: 180px;
            text-align: center;
            border-collapse: collapse;
        }

        thead {
            background-color: #0089CC;
            height: 30px;
        }

        tbody {
            background-color: #F5EFF5;
        }

        tbody td {
            border: 1px solid #E5E0E6;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" name="" id="all">
                </th>
                <th>
                    商品
                </th>
                <th>价钱</th>
            </tr>
        </thead>

        <tbody id="tb">
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>华为</td>
                <td>10000</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>小米</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>phone</td>
                <td>1200</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="" id=""></td>
                <td>windows phone</td>
                <td>9500</td>
            </tr>
        </tbody>
    </table>

下面是重点代码：

<script>
        var all = document.querySelector("#all");
        var tb = document.querySelector("#tb").getElementsByTagName("input");
        // var flag = 0;
        all.onclick = function () {//绑定点击事件
            //this.checked可以得到当前复选框的状态，如果是true，则表示选中
            console.log(this.checked);
            // 全选/全不选
            for (let i = 0; i < tb.length; i++) {
                    tb[i].checked = this.checked;
            }    
        }

        // ------------------------------------------------
        // 如果有1个不选，则all按钮不会被选,如果小按钮全选，则all会被选上
        for (let i = 0; i < tb.length; i++) {//给4个小按钮添加点击事件
            tb[i].onclick=function(){
                console.log("小按钮被选中");
                //flag判断全选按钮是否被选中 
                var flag=true;
                // 每次点击复选框都要循环检查4个小按钮，是否被全选
                for (let i = 0; i < tb.length; i++) {
                    if (!tb[i].checked) {//如果这个按钮没有被选中
                        // all.checked=false;// 如果有一个小按钮，没有被选中，则大按钮不会被选中。
                        flag=false;
                    }
                }
                // 如果所有的小按钮被选中，则令大按钮为真
                all.checked=flag;
            }
        }
    </script>