网页全选javascript组件

ahomeeye · 发表于 2013-2-7 16:06:40

这是个网上找的网页复选框js全选组件例子。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>checkbox的js全选功能</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <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>checkbox的js全选功能</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" ></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" ></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" ></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" ></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>

js代码：
/** * checkbox的点击方法 * 要求： * 1.全选/全不选的checkbox的name属性为单个checkbox的name属性名+_all , 注意:最后必须为_all. * 例如:单个checkbox的name=or_id,则全选checkbox的name=or_id_all * 2.全选/全不选的checkbox必须定义id属性,并且id属性值与name属性值相同 * 3.所有单个的checkbox在同一个form中. * 4.全选/全不选的checkbox可以在form中也可以在form外面. * 5.整个页面不允许再有和全选/全不选checkbox同name和同id的组件. * */function _tlsCheckboxSelAll(formObj,checkboxClicked){var checkName = checkboxClicked.name;//取得点击的checkbox的name属性var index = checkName.indexOf("_all");//判断是否有_all字符串var isAll = false;if(index!=-1){//如果有_allif(index+"_all".length==checkName.length){//满足说明_all是在最后面，表示这是个全选/全不选的checkbox.isAll = true;}}var thisChecked = checkboxClicked.checked;//当前checkbox的状态 true=选中 false=不选中if(isAll){//点了全选/全不选的checkboxvar childCheckName = checkName.substring(0,index);eval("var allChildCheckboxs = formObj."+childCheckName);var childCheckboxCount = allChildCheckboxs.length;if(childCheckboxCount==null){//只有1个单个的checkboxallChildCheckboxs.checked = thisChecked;}else{//有2个或2个以上的单个checkboxfor(var i=0;i<childCheckboxCount;i++){allChildCheckboxs[i].checked = thisChecked;}}}else{//点了单个的checkboxvar 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){//只有1个单个的checkboxif(allChildCheckboxs.checked==false){isAllChecked = false;}}else{//有2个或2个以上的单个checkboxfor(var i=0;i<childCheckboxCount;i++){if(allChildCheckboxs[i].checked==false){isAllChecked = false;break;}}}if(isAllChecked){//全部单个checkbox都处于true状态document.getElementById(parentCheckboxName).checked=true;}}}}

		自动登录	找回密码
密码			立即注册