网页全选javascript组件

最新推荐文章于 2023-06-27 21:22:39 发布

iteye_20824

最新推荐文章于 2023-06-27 21:22:39 发布

阅读量82

点赞数

分类专栏： html 文章标签： JavaScript IE Firefox HTML ViewUI

本文链接：https://blog.csdn.net/iteye_20824/article/details/82071372

版权

html 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

这是个网上找的网页复选框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" 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>

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){//如果有_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 = formObj."+checkName);
			var childCheckboxCount = allChildCheckboxs.length;
			var isAllChecked = true;
			if(childCheckboxCount==null){//只有1个单个的checkbox
				if(allChildCheckboxs.checked==false){
					isAllChecked = false;
				}
			}else{//有2个或2个以上的单个checkbox
				for(var i=0;i<childCheckboxCount;i++){
					if(allChildCheckboxs[i].checked==false){
						isAllChecked = false;
						break;
					}
				}				
			}
			if(isAllChecked){//全部单个checkbox都处于true状态
				document.getElementById(parentCheckboxName).checked=true;
			}
		}
	}
}

iteye_20824

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页全选javascript组件

这是个网上找的网页复选框js全选组件例子。[code="java"] checkbox的js全选功能 function sel(obj){ _tlsCheckboxSelAll(document.frmUser,obj); } checkbox的js全选功能全选姓名 ...
复制链接

扫一扫