惯用的js全选checkbox按钮的功能
日期：2014-05-16 浏览次数：20405 次
常用的js全选checkbox按钮的功能
想不到贴个大家可能需要的js脚本出来，这么多人喜欢踩 ~
在WEB项目中关于全选的checkbox功能肯定会遇到，而且每个项目中都会有不少的地方会用到。下面把以前自己用的例子贴出来，在ie和firefox下都可以正常运行，有兴趣的朋友也可以参考下。
例子示意图如下：
代码如下：
想不到贴个大家可能需要的js脚本出来，这么多人喜欢踩 ~
在WEB项目中关于全选的checkbox功能肯定会遇到，而且每个项目中都会有不少的地方会用到。下面把以前自己用的例子贴出来，在ie和firefox下都可以正常运行，有兴趣的朋友也可以参考下。
例子示意图如下：
代码如下：
<!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=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>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" 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属性为 单个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){//如果有_all
if(index+"_all".length==checkName.length){//满足说明_all是在最后面，表示这是个全选/全不选的checkbox.
isAll = true;
}
}
var thisChecked = checkboxClicked.checked;//当前checkbox的状态 true=选中 false=不选中
if(isAll){//点了全选/全不选的checkbox
var childCheckName = checkName.substring(0,index);
eval("var allChildCheckboxs = formObj."+childCheckName);
var childCheckboxCount = allChildCheckboxs.length;
if(childCheckboxCount==null){//只有1个单个的checkbox
allChildCheckboxs.checked = thisChecked;
}else{//有2个或2个以上的单个checkbox
for(var i=0;i<childCheckboxCount;i++){
allChildCheckboxs[i].checked = thisChecked;
}
}
}else{//点了单个的checkbox
var parentCheckboxName = checkName+"_all";
if(thisChecked==false){
document.getElementById(parentCheckboxName).checked=false;
}else{//判断点了当前checkbox后是否全部的单个checkbox都处于true状态
eval("var allChildCheckboxs = f
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
