首页 > 图灵资讯 > 技术篇>正文
常用的js全选checkbox按钮的功能
2023-06-14 09:47:56
[color=red][b]出乎意料的是，发布了一个你可能需要的js脚本。这么多人喜欢踩它。 ~[/b][/color] 在WEB项目中，肯定会遇到全选checkbox功能，每个项目都会用到很多地方。下面贴出以前用过的例子，在ie和firefox下都可以正常运行，感兴趣的朋友也可以参考。 示例示意图如下： [img]https://www.tulingxueyuan.cn/d/file/p/20230614/0w1f3rbafis.png 代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>checkboxjs全选功能</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link href="default.css" type="text/css" rel="stylesheet" /><script language="JavaScript" src="selectall.js"></script><script> function sel(obj){ _tlsCheckboxSelAll(document.frmUser,obj); }</script></head><body bgcolor="#FFFFFF" topmargin="15px" leftmargin="5px" rightmargin="5px"><center><b>checkboxjs全选功能</b></center><form name="frmUser" id="frmUser" method="post"><table class="tabelBoder" width="100%" align="center" cellspacing="0" cellpadding="3" border="0"><tr height="30" class="RH1"><td width="4%" align="left"><input type="checkbox" name="id_all" id="id_all" value="46" onclick="sel(this)"></td><td width="17%" align="left">姓名</td><td width="23%" align="left">地址</td></tr><tr height="30" class="N1"><td width="4%" align="left"><input type="checkbox" name="id" value="46" onclick="sel(this)"></td><td width="17%" align="left">张三</td><td width="23%" align="left">北京</td></tr><tr height="30" class="N1"><td width="4%" align="left"><input type="checkbox" name="id" value="46" onclick="sel(this)"></td><td width="17%" align="left">李四</td><td width="23%" align="left">上海</td></tr><tr height="30" class="N1"><td width="4%" align="left"><input type="checkbox" name="id" value="46" onclick="sel(this)"></td><td width="17%" align="left">王五</td><td width="23%" align="left">天津</td></tr></table></form><ui> <li>支持ie和firefox</li> <li>选择checkbox，自动选择所有子checkbox</li> <li>去掉选中的checkbox，所有子checkbox自动取消选中</li> <li>如果选择所有checkbox，自动选择checkbox</li> <li>全选后，如果选中任何子checkbox被删除，选中的checkbox将被自动取消</li></ul></body></html>
/** * checkbox点击方法 * 要求： * 1.checkbox的name属性为全选/全不选 name属性名+单个checkbox_all , 注意:最后一定要_all. * 例如:单个checkboxname=or_id,选择checkboxname=or_id_all * 2.checkbox必须定义id属性，全选/全不选。id属性值与name属性值相同 * 3.同一form中所有单个checkbox. * 4.checkbox可以在form或form外面进行全选/全不选. * 5.整个页面不允许有与全选/不选checkbox、name和id相同的组件. * */function _tlsCheckboxSelAll(formObj,checkboxClicked){var checkName = checkboxClicked.name;///单击checkboxname属性varr index = checkName.indexOf("_all");//判断是否_all字符串var isAll = false;if(index!=-1){///如果有_allif(index+"_all".length==checkName.length){//满足说明_all在最后，这意味着这是一个checkbox，checkbox，全选/全选.isAll = true;}}var thisChecked = checkboxClicked.checked;////当前checkbox状态 true=选中 false=不选中if(isAll){//点击全选/不选checkboxvarr childCheckName = checkName.substring(0,index);eval（"var allChildCheckboxs = formObj."+childCheckName);var childCheckboxCount = allChildCheckboxs.length;if(childCheckboxCount==null){///只有一个单个checkboxlchildcheckboxs.checked = thisChecked;}else{/有两个或两个以上的单个checkboxforr(var i=0;i<childCheckboxCount;i++){allChildCheckboxs[i].checked = thisChecked;}}}else{///点击单个checkboxvarr parentCheckboxName = checkName+"_all";if(thisChecked==false){document.getElementById(parentCheckboxName).checked=false;}else{///判断当前checkbox后是否所有单个checkbox都处于true状态eval(”var allChildCheckboxs = formObj."+checkName);var childCheckboxCount = allChildCheckboxs.length;var isAllChecked = true;if(childCheckboxCount==null){///只有一个单个checkboxif(allChildCheckboxs.checked==false){isAllChecked = false;}}else{/有两个或两个以上的单个checkboxforr(var i=0;i<childCheckboxCount;i++){if(allChildCheckboxs[i].checked==false){isAllChecked = false;break;}}}if(isAllChecked)(///所有单个checkbox都处于true状态的documentent状态.getElementById(parentCheckboxName).checked=true;}}}}
附件：本文使用的所有例子都在最后的压缩包zip中（example.zip）中。
------------------------------------------
分享知识，分享快乐，希望文章能给有需要的朋友带来一点帮助。