js---基础案例-多选框全选

最新推荐文章于 2022-04-08 22:17:41 发布

零度碳酸-

最新推荐文章于 2022-04-08 22:17:41 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏： JS基础练习题

本文链接：https://blog.youkuaiyun.com/weixin_41086056/article/details/88016224

JS基础练习题专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种实现全选按钮与多个复选框联动效果的方法，通过监听全选按钮和各复选框的点击事件，更新所有相关复选框的状态，确保全选状态与所有复选框的一致性。

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

效果图：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="allCheck" type="checkbox"><label for="allCheck">全选</label>
    <input id="check0" type="checkbox"><label for="check0">选项1</label>
    <input id="check1" type="checkbox"><label for="check1">选项2</label>
    <input id="check2" type="checkbox"><label for="check2">选项3</label>
    <input id="check3" type="checkbox"><label for="check3">选项4</label>
    <input id="check4" type="checkbox"><label for="check4">选项5</label>
    <script>
        /*
        *  获取全选的按钮
        *
        * */
        var allCheck=document.getElementById("allCheck");
        allCheck.addEventListener("click",clickHandler);
        /*
        * 获取所有的其他按钮
        * */
        for(var i=0;i<5;i++){
            var check=document.getElementById("check"+i);
            check.addEventListener("click",clickHandler);
        }

        /*
        *  点击判断选择
        *
        * */
        function clickHandler(e) {
            /*
            * 判断是否全选或者取消全选
            * 判断当前点击按钮是否是全选按钮
            * 如果是循环所有其他按钮,并且设置其他按钮的checked与当前全选按钮checked相同
            * */
            if(this===allCheck){
                for(var i=0;i<5;i++){
                    var check=document.getElementById("check"+i);
                    check.checked=this.checked;
                }
                return;//终结后面的代码
            }

            /*
            *
            *  判断点击其他多选按钮是否全选按钮被选中
            *
            *  初始设置一个bool值是true
            *  循环所有其他按钮,判断其他按钮中是否有没有被选中的,如果有没被选中的按钮
            *  让bool=false
            *  当所有循环完毕时,判断bool是否还是true,如果bool还是true,代表其他按钮都被选中
            *  我们就让全选按钮被选中,跳出
            *  如果有没被选中的,就让全选按钮不被选中
            * */
            /*var bool=true;
            for(var j=0;j<5;j++){
                var check1=document.getElementById("check"+j);
                if(!check1.checked){
                    bool=false;
                }
            }
            if(bool){
                allCheck.checked = true;
                return;
            }
            allCheck.checked=false

        }*/
//            改进
            for(var j=0;j<5;j++){
                var checks=document.getElementById("check"+j);
                if(!checks.checked) {
                    allCheck.checked=false;
                    return;
                }
            }
            allCheck.checked=true;

        }
    </script>
</body>
</html>