首页 > 代码库 > 关于checkbox全选与反选的问题
关于checkbox全选与反选的问题
在一组checkbox中常有这样的需求,选择全选按钮,所有的选项必须全选上,当再次点击时,则所有的按钮必须反选,当点击一组checkbox时,只有有一个不选上,则按钮不选中,当所有的按钮全部选上时,此时全选按钮就选上,具体代码的思路如下:
1:触发全选按钮获取全选按钮的checked布尔值,将全选按钮的全选布尔值传给其他子序列checkbox,从而控制所有的checkbox
2:触发所有子选项checkbox,循环选择所有子选项的checkox布尔状态,当所有的子选项checkbox只要一项不选中时,则全选按按钮布尔值为false,否则全选中,全为true;
<div class="box"> <label><input type="checkbox" name="checkAll"/><span>全选</span></label> <label><input type=‘checkbox‘ name="items"/>音乐</label> <label><input type=‘checkbox‘ name="items"/>篮球</label> <label><input type=‘checkbox‘ name="items"/>足球</label> <label><input type=‘checkbox‘ name="items"/>排球</label> <label><input type=‘checkbox‘ name="items"/>举重</label> </div>
var checkAllDom = document.querySelector("input[name=‘checkAll‘]"); var spanDom = document.getElementsByTagName("span")[0]; var items = document.getElementsByName("items"); checkAllDom.onclick = function(){ var isFlag = this.checked; checkAll(isFlag); }; //全选 function checkAll(flag){ if(flag){ for(var i=0;i<items.length;i++){ //debugger; items[i].checked = true; } spanDom.innerText = "全选" }else{ for(var i=0;i<items.length;i++){ items[i].checked = false; } spanDom.innerText = "反选" } }; //单选控制 for(var i=0;i<items.length;i++){ items[i].onclick = function(){ var flag = true;//定义一个开关 //alert(this.checked) for(var i=0;i<items.length;i++){ if(items[i].checked ==false){//只要有一个为false,则为false flag = false; console.log(1); }; if(flag){ checkAllDom.checked = true; }else{ checkAllDom.checked = false; } }; }; }
对应单选与全选效果如下:
关于checkbox全选与反选的问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。