表单复选框按钮全选-取消全选小案例

最新推荐文章于 2024-05-11 12:12:57 发布

超级无敌奥特蔓

最新推荐文章于 2024-05-11 12:12:57 发布

阅读量1.1k

点赞数

分类专栏： Dom 文章标签： javascript

本文链接：https://blog.csdn.net/m_0_1_0_1/article/details/123761960

版权

Dom 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

思路：

第一部分--全选和取消全选做法：

让下面所有的复选框的checked属性（选中状态）跟随全选按钮即可

第二部分--下面复选框需要全部选中，上面全选复选框才能选中：

利用for循环将每个复选框添加点击事件，接着使用一个小技巧（设置一个flag变量控制全选按钮是否选中。并为其赋值为true默认选中,因为checked的属性返回值为true和false）。再一次使用for循环，当每次点击下面的复选框时，都需要检查一下同类的复选框是否被全部选中。若有一个未被选中，执行if条件语句的内容将flag赋值为false.最后将flag的值赋值给全选按钮即可。

<!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 {
            margin: 100px auto;
            width: 300px;
            height: 200px;
        }
        
        thead tr {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <table border="1" cellspacing="0">
        <thead>
            <tr>
                <th><input type="checkbox" id="box1" /></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="box2">
            <tr>
                <td><input type="checkbox" /></td>
                <td>Ipad1</td>
                <td>3333</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>Ipad1</td>
                <td>3333</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>Ipad1</td>
                <td>3333</td>
            </tr>
        </tbody>
    </table>
    <script>
        /* 上面的一个总按钮影响下面的分个按钮 */
        //获取元素
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2").getElementsByTagName("input");
        //注册事件
        box1.onclick = function() {
            for (var i = 0; i < box2.length; i++) {
         //this.checked可以得到当前复选框的选中状态，如果是true就是选中，否则就是未选中
                box2[i].checked = this.checked;
            }
        };
        /* 下面的分个按钮影响上面的总按钮 */
        for (var i = 0; i < box2.length; i++) {
            box2[i].onclick = function() {
                //设置flag变量来控制全选按钮是否选中
                var flag = true;
              //每次点击下面的复选框都要循环检查4个复选框是否全被选中
                for (var i = 0; i < box2.length; i++) {
                    if (!box2[i].checked) {
                     flag = false;
     //若有一个未选中，则将flag赋值为false,否则就不执行if中的代码
                    }
                }
                box1.checked = flag;
            };
        }
    </script>
</body>

</html>

超级无敌奥特蔓

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
表单复选框按钮全选-取消全选小案例

思路：第一部分--全选和取消全选做法：让下面所有的复选框的checked属性（选中状态）跟随全选按钮即可第二部分--下面复选框需要全部选中，上面全选复选框才能选中：利用for循环将每个复选框添加点击事件，接着使用一个小技巧（设置一个flag变量控制全选按钮是否选中。并为其赋值为true默认选中,因为checked的属性返回值为true和false）。再一次使用for循环，当每次点击下面的复选框时，都需要检查一下同类的复选框是否被全部选中。若有一个未被选中，执行if条件语句的内容将flag赋.
复制链接

扫一扫

专栏目录