JS实现全选、全不选的email效果

最新推荐文章于 2023-04-15 15:13:09 发布

sweetllh

最新推荐文章于 2023-04-15 15:13:09 发布

阅读量392

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sweetllh/article/details/70185463

版权

javascript 专栏收录该内容

73 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div><input type="checkbox" id="checkAll"/>全选/全不选</div>
        <ul>
            <li><input type="checkbox" class="cb" /> 1......</li>
            <li><input type="checkbox" class="cb" /> 2......</li>
            <li><input type="checkbox" class="cb" /> 3......</li>
            <li><input type="checkbox" class="cb" /> 4......</li>
            <li><input type="checkbox" class="cb" /> 5......</li>
        </ul>
    </body>
    <script>
        // 依据标签的class属性获取标签对象，这个能精确定位
        var inputs = document.getElementsByClassName('cb');
        var checkAll=document.getElementById('checkAll');
        /*
         * 匿名函数只针对checkAll的点击事件
         */
        // 全选、全不选
       checkAll.onclick = function(){
            for (var i=0;i<inputs.length;i++){
                inputs[i].checked = this.checked;
                // 1. 自己是否被选上
                // this，指的是当前的标签，在这里指的是<input type="checkbox" id="checkAll"/>
                // 2. 如果被选上把其它的也勾选上
                // 3. 否则其它的也不勾选
            }
        };

        for(var i=0;i<inputs.length;i++){
            inputs[i].onclick=function(){

                if(!this.checked){
                    // 当 inputs有一个不选时，checkAll不选
                    checkAll.checked=false;
                } 

                  // 当inputs全选时，checkAll选中
                var status = true;
                for (var j=0;j<inputs.length;j++){
                    if (inputs[j].checked == false){
                        status = false;
                        break;
                    }
                }
                checkAll.checked = status;
            }
            }   
    </script>
</html>

当inputs全选时，checkAll选中，也可以写成这样。

                checkAll.checked = true;
                for (var j=0;j<inputs.length;j++){
                    if (inputs[j].checked == false){
                        checkAll.checked = false;
                        break;
                    }
                }

sweetllh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现全选、全不选的email效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div><input type="checkbox" id="checkAll"/>全选/全不选</div> <ul>
复制链接

扫一扫

专栏目录