多选框checkbox全选全不选和反选

Posted 2020-10-05

在判断多选框中的某一个是否被选中时，我们可以用checked的属性

选中了就返回true，没被选中就返回false;

这是html代码：

<form action="#">
    <label for="hobby">爱好：</label>
    <label for="hobby1">
        <input type="checkbox" name="hobby" id="hobby1">吃饭
    </label>
    <label for="hobby2">
        <input type="checkbox" checked="" name="hobby" id="hobby2">睡觉
    </label>
    <label for="hobby3">
        <input type="checkbox" name="hobby" id="hobby3">打豆豆
    </label>
    <button type="button" id="all">全选/全不选</button>
    <button type="button" id="fan">反选</button>
</form>

接下来书写js来进行全选/全不选    var checkbox=document.querySelectorAll("input");//获取所有的checkbox    var all=document.getElementById("all");//获取全选按钮

    var fan=document.getElementById("fan");//获取反选按钮
    all.addEventListener("click",function () {//绑定点击事件
        var arr=[];//定义一个空数组
        for(var i=0;i<checkbox.length;i++){
            //console.log(checkbox[i].checked);
            arr.push(checkbox[i].checked)//利用for循环将每个checkbox的checked属性返回的true或者false存入数组arr中；
        }
        console.log(arr.indexOf(false));//判断arr中是否包含false，返回-1则是不包含false，那么所有的多选框都被选中，返回0，1,2等等；
　　　　　则是证明arr中包含false，则证明所有的checkbox中有没有被选中的；
        if(arr.indexOf(false)!="-1"){
            for(var j=0;j<checkbox.length;j++){
                checkbox[j].checked=true;//让所有的多选框被选中
            }
        }else {
            //alert(111);
            for(var j=0;j<checkbox.length;j++){
                checkbox[j].checked=false;//让所有的多选框都没有被选中选
            }
        }
    })
接下来是书写js让反选实现　　

fan.addEventListener("click",function () {
    for(var i=0;i<checkbox.length;i++){
        if(checkbox[i].checked==true){//先用for循环判断每一个checkbox是否被选中，选中的让其不被选中，不被选中的选中；
            checkbox[i].checked=false;
        }else {
            checkbox[i].checked=true;
        }
    }
})

总结：在判断多个复选框是否有没有被选中时我们并不能直接进行判断，此时我们可以使用创立一个新数组，然后利用for循环将每一个多选框是否被选中的返回结果存入数组中，然后跟根据

indexof判断数组中是否有false，如果有则返回下标，没有则返回-1；判断过后再进行全选全不选。