码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-08-31 22:21:52      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:add   select   for   下标   type   []   doc   ++   没有   

在判断多选框中的某一个是否被选中时,我们可以用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全选全不选和反选

标签:add   select   for   下标   type   []   doc   ++   没有   

原文地址:http://www.cnblogs.com/mark20170707/p/7460703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!