js 写全选按钮

js 写全选按钮

css代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            padding:20px;
            border-radius: 5px;
            border: 1px solid black;
            margin: 50px auto;
        }
        hr{
            margin: 10px 0;
        }
    </style>

html代码

	<div class="box">
        全选：<input type="checkbox"><br>
        <hr>
        <input type="checkbox"> 选项一<br>
        <input type="checkbox"> 选项二<br>
        <input type="checkbox"> 选项三<br>
        <input type="checkbox"> 选项四
    </div>

js代码

<script>
    //1.获取元素
    var allbtn=document.querySelector('input')
    var items=document.querySelectorAll('input:nth-child(n+2)')

    //2.给全选按钮绑定事件
    allbtn.onclick=function(){
        //2.1拿到自己的选中状态
        var type=allbtn.checked
        console.log(type)
        //2.2把自己的选中状态设置给每一个选项按钮
        for(var i=0;i<items.length;i++){
            items[i].checked=type
        }
    }
    //3.循环给每一个选项按钮绑定点击事件
    for(var i=0;i<items.length;i++){
        //3.1 给每一个选项按钮绑定点击事件
        items[i].onclick=function(){
            //3.2 首先定义假设变量，假设所以按钮都是选中的
            var flag=true
            //3.3 通过循环来验证我们的假设
            for(var j=0;j<items.length;j++){
                if(items[j].checked===false){
                    flag=false
                    break
                }
            }
            //3.4 把得到的结果赋值给全选按钮
            allbtn.checked=flag
        }
    }
</script>