/** *js控制复选框全选V2.0版本使用说明 * *修复功能:加入同一页面多个复选框全选控制 * *1.在页面中引用该js; *2.在全选框onclick事件中调用doCheck(obj,firstCheckBox)方法:obj:this;firstCheckBox:全选框ID *3.在全选项onclick事件中调用toChkSon(obj,firstCheckBox)方法:obj:this.checked;firstCheckBox:子项ID *4.注意:子项ID须存在全选框ID;如:全选框ID为selectAll 则子项id必须存在selectAll字符 *5.获取选中的子复选框调用getCheckValue(firstCheckBox)方法: firstCheckBox:全选框ID *6.获取选中的复选框值调用getCheckBoValue(firstCheckBox)方法: firstCheckBox:全选框ID (返回value值用;隔开) * *@author:张申龙 *@date:20130419 **/ /** * 操作全选复选框事件(用于全选复选框) * obj this * firstCheckBox 全选的复选框id **/ function doCheck(obj,firstCheckBox) { var inputs=document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++) { if(inputs[i].type=="checkbox" && inputs[i].id!=firstCheckBox && inputs[i].id.indexOf(firstCheckBox)!=-1) //刷选出所有复选框 { inputs[i].checked=obj.checked; } } } /** * 复选框变化 全选按钮变化(用于下面复选框) * obj this.checked * firstCheckBox 全选的复选框id **/ function toChkSon(obj,firstCheckBox) { if(obj==false) //当此复选框未选中 全选为未选 { document.getElementById(firstCheckBox).checked=false; return ; } var chkInputs=getCheckBox(firstCheckBox); //获取所有复选框 var j=0; for(var i=0;i<chkInputs.length;i++) { if(chkInputs[i].checked==obj) j++; else break; } if(j==chkInputs.length) //当所有复选框为同一状态时 赋值全选同一状态 document.getElementById(firstCheckBox).checked=obj; } /** * 获取所有复选框 **/ function getCheckBox(firstCheckBox) { var inputs=document.getElementsByTagName("input"); var chkInputs=new Array(); var j=0; for(var i=0;i<inputs.length;i++) { if(inputs[i].type=="checkbox" && inputs[i].id!=firstCheckBox && inputs[i].id.indexOf(firstCheckBox)!=-1) //刷选出所有复选框 { chkInputs[j]=inputs[i]; j++; } } return chkInputs; } /** **获取选中复选框值 用;隔开 **/ function getCheckBoValue(firstCheckBox){ var chkInputs=getCheckValue(firstCheckBox); //获取选中所有复选框 var values=""; if(chkInputs==null || chkInputs.length==0){ alert("请选中一项"); }else{ for(var i=0;i<chkInputs.length;i++){ values+=chkInputs[i].value+";"; } } return values; } /** * 选中复选框集合 **/ function getCheckValue(firstCheckBox){ var chkInputs=getCheckBox(firstCheckBox); //获取所有复选框 var inputArray=new Array(); if(chkInputs!=null && chkInputs.length>0){ var j=0; for(var i=0;i<chkInputs.length;i++){ if(chkInputs[i].checked){ inputArray[j]=chkInputs[i]; j++; } } } return inputArray; }
页面调用如:
- <html>
- <meta http-equiv="Content-Type" content="text/html" charset="gbk" />
- <head>
- <script src="checkBox.js" type="text/javascript"></script>
- </head>
- <body>
- <table>
- <tr width="100%">
- <td >
- 全选高富帅:<input type="checkbox" name="chkMsgId" id="chkMsgId" onclick="doCheck(this,'chkMsgId')" /> <br/>
- 高富帅1:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');" id="chkMsgId23" name="chkMsgId1" value="【高富帅1】值1" /> <br/>
- 高富帅2:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');" id="chkMsgId23" name="chkMsgId2" value="【高富帅】值2"/> <br/>
- 高富帅3:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');" id="chkMsgId23" name="chkMsgId3" value="【高富帅】值3"/> <br/>
- 高富帅4:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');" id="chkMsgId23" name="chkMsgId4" value="【高富帅】值4"/> <br/>
- 高富帅5:<input type="checkbox" onclick="toChkSon(this.checked,'chkMsgId');" id="chkMsgId23" name="chkMsgId5" value="【高富帅】值5"/> <br/>
- </td>
- <td width="20%">
- </td>
- <td style="color:blue;">
- 全选白富美2:<input type="checkbox" name="chk2" id="chk" onclick="doCheck(this,'chk2')" /> <br/>
- 白富美1:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');" id="chk21" name="chk21" value="【白富美】值1" /> <br/>
- 白富美2:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');" id="chk22" name="chk22" value="【白富美】值2"/> <br/>
- 白富美3:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');" id="chk23" name="chk23" value="【白富美】值3"/> <br/>
- 白富美4:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');" id="chk24" name="chk24" value="【白富美】值4"/> <br/>
- 白富美5:<input type="checkbox" onclick="toChkSon(this.checked,'chk2');" id="chk25" name="chk25" value="【白富美】值5"/> <br/>
- </td>
- </tr>
- </table>
- <br/><br/>
- <input type="button" value="获取【高富帅】选中按钮值" onclick="alert(getCheckBoValue('chkMsgId'));"/>
- <input type="button" value="获取【白富美】选中按钮值" onclick="alert(getCheckBoValue('chk2'));"/>
- <br/><br/>
- <font style="color:red;font-size:12px;">
- 提示:
- 1.点击全选按钮就可以控制全选、反选;<br/>
- 2.勾选子项可以控制全选按钮;<br/>
- 3.多个全选复选框id不要存在包含关系;
- </font>
- </body>
- </html>
相关推荐
jquery 、js实现复选框 (全选、反选)功能··
js控制页面的全选、反选 与获取选中的复选框值
用Axure RP 8.0做的原型设计列子,作用是复选框做全选和非全选,已选的做反选。可以学习下反选或非反选的交互思路。
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
实现table表格checkbox复选框的全选 反选.
javascript 实现复选框全选/取消功能
主要介绍了微信小程序获取复选框全选反选选中的值,本文通过实例代码给大家简单介绍,需要的朋友可以参考下
基于jQuery的三个JS复选框全选反选例子.zip
axure复选框全选反选效果.rp
多选框全选和反选,用js做的,多选框单选和反选,和使用的代码
spreadjs_列头添加复选框全选功能-demo
js特效制作js checkbox复选框全选 反选 取消全部等设置多个表单里面的checkbox复选框勾选特效。内含js代码下载。
复选框全选、全不选和反选的效果实现
复选框实现datagridview全选反选和全不选,datagridview换颜色(选中复选框之后)
主要为大家详细介绍了javaScript实现复选框全选反选事件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
带复选框的多级目录树,复选框的选择控制子节点父节点 全选和反选 通过子节点控制父节点及以上父节点是否要选中
javascript 复选框全选,复选框全选,复选框全选
复选框的全选和反选复选框的全选和反选复选框的全选和反选
js 实现 复选框全选(二)! 值得下载看看!资源免费,大家分享!!
一些VS2008快捷键,JS复选框全选,反选..