关于html js 全选框逻辑问题

范哲的博客

于 2022-09-01 14:05:20 发布

阅读量150

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_66592791/article/details/126641843

版权

css部分

 div{
            width: 200px;
            height: 300px;
            margin: 100px auto;
            border: 2px solid rgb(161, 230, 63);
            border-radius: 40px;
            padding: 40px;
        }
        hr{
            margin: 20px 0;
        }

html部分

写出5个 checkbox属性的input

第一个表示全选按钮

后四个表示其他选项

 <div>
        <label for="quanxuan">全选：</label><input type="checkbox" id="quanxuan">
        <br><hr>
        <input type="checkbox" id="xuanxiangyi" class="anniu"><label for="xuanxiangyi">选项一</label><br>
        <input type="checkbox" id="xuanxianger" class="anniu"><label for="xuanxianger">选项二</label><br>
        <input type="checkbox" id="xuanxiangsan" class="anniu"><label for="xuanxiangsan">选项三</label><br>
        <input type="checkbox" id="xuanxiangsi" class="anniu"><label for="xuanxiangsi">选项四</label>
    </div>

js部分

利用元素类名获取元素

也可以利用伪类获取元素

一、var qita=document.querySelectorAll('input:nth-child(n+4)');

为什么“+4”，具体我也不知道但是，我认为是从第二个开始的所以，n+2*2，这样才是从第二个开始的。

二、document.querySelectorAll 获取元素的方法返回的是一个数组，所以使用的时候

qita[i]这样去使用。

 <script>
        //获取元素
        var quanxuan=document.querySelector('input');
        var qita=document.querySelectorAll('.anniu');
        // console.log(quanxuan);
        // console.log(qita);
        //把自己选中的状态给每一个选项
        quanxuan.onclick=function(){
            var type=quanxuan.checked;
            // console.log(type);
            for(var i=0;i<qita.length;i++){
                qita[i].checked=type;
            }
        }

        
        //循环给每一个事项添加点击事件
        for(var i=0;i<qita.length;i++){
 
            qita[i].onclick=function(){
                 //假设全部都是选中的状态
                var zhuangtai=true;
                //验证假设
                for(var j=0;j<qita.length;j++){
                    if(qita[j].checked===false){
                        zhuangtai=false;
                        break;
                    }
                }
                // console.log(zhuangtai);
                //判断如果假设成立quanxuan.checked变为true属性，否则相反
                if(zhuangtai===true){
                quanxuan.checked=true;
            }else{
                quanxuan.checked=false
            }
            }
            
        }


    </script>