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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了多选框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;判断过后再进行全选全不选。
  

以上是关于多选框checkbox全选全不选和反选的主要内容,如果未能解决你的问题,请参考以下文章

js实现复选框的全选全不选和反选

用jQuery实现复选框的全选全不选和反选

js 脚本怎样实现checkbox的全选,反选,类似邮箱中邮件的全选后删除移动

请问checkbox如何产生级联的(全选,反选,不选)代码是啥样子的?

JQuery案例二:实现全选全不选和反选

jQuery实现复选框全选全不选反选问题解析