JavaScript练习小案例-----全选按钮

最新推荐文章于 2022-04-10 23:19:54 发布

小不言啊

最新推荐文章于 2022-04-10 23:19:54 发布

阅读量126

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_61656944/article/details/122798760

版权

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

        .box {
            width: 100px;
            padding: 20px;
            border: 1px solid pink;
            margin: 30px auto;
            border-radius: 5px;
        }

        hr{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        全选： <input type="checkbox"> <br>
        <hr>
        <input type="checkbox" >选项一 <br>
        <input type="checkbox" >选项二 <br>
        <input type="checkbox" >选项三 <br>
        <input type="checkbox" >选项四 <br>
    </div>




    <script>
        // 获取元素
        var allBtn = document.querySelector("input");
        var items = document.querySelectorAll("input:nth-child(n+2)")
   
        // 给全选按钮绑定事件
        allBtn.onclick = function(){

            // 拿到自己的选中状态
            var type = allBtn.checked;

            // 把自己的选中状态设置给每一个选项按钮
            for (var i = 0; i < items.length; i++) {
                items[i].checked = type;
            }

        }

        // 循环每一个选项按钮绑定点击事件
        for (var  i = 0; i < items.length; i++) {
           
        // 给每一个选项按钮绑定点击事件
            items[i].onclick = function () {


                  // 首先定义假设变量
                  var flag = true;


                //   通过循环来验证我们的假设
                for (var j = 0; j < items.length; j++) {
                  
                  if (items[j].checked === false) {
                      flag = false;
                      break;
                  }
                    
                }
                

                // 把我们得到的结果设置给全选按钮
                allBtn.checked = flag;
            }

              
           
            
        }
   
   
    </script>

小不言啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript练习小案例-----全选按钮

<style> * { margin: 0; padding: 0; } .box { width: 100px; padding: 20px; border: 1px solid pink; margin: 30px auto; border-radius: 5px; ..
复制链接

扫一扫