网页全选javascript组件

ahomeeye

浏览: 662289 次
性别:
来自: 广州

最近访客更多访客>>

home202

yuxin_wx

dyu2012

jayzheng1234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html

JavaScript IE Firefox HTML

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

分享到：

javascript日期选择组件 | JSTL的c:forEach标签

2011-06-02 18:16
浏览 1003
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

网页全选javascript组件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

网页全选javascript组件

评论

发表评论

相关推荐

转 js中数据类型判断(转)

包含日期和时间的选择器(转)

jsp通用分页实现脚本

Java过滤html标签

Web项目设置页面不缓存

JS动态创建表格(转)

ajax请求带中文url的参数转码解码

CSS模块化设计——从空格谈起

html框架页面文档声明

本地、远程图片上传预览

图片上传预览

修改 input file 的按钮值

Struts2中表单与Action传递数据三种方式(转)

HTML4和HTML5之间的10个主要不同

浏览器对js支持的差异

键盘与ASCII对应值

表格测试

网页iframe标签使用

js去除前后空格方法

js获取下拉列表选中项的值和文本(select)以及获取单选按钮(radio)组的值和修改选中项[转]

最近访客更多访客>>