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

在判断多选框中的某一个是否被选中时，我们可以用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；判断过后再进行全选全不选。