常用的js全选checkbox按钮的功能

stephen830

浏览: 3010589 次
性别:
来自: 上海

最近访客更多访客>>

jAmEs_

wangzhigang2

Z865785437029

sampou

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript实用脚本

jQuery IE Firefox EXT 框架

想不到贴个大家可能需要的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 = 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;
			}
		}
	}
}

附件：本文使用的例子全部在最后的压缩包zip（example.zip）中。

------------------------------------------
分享知识，分享快乐，希望文章能给需要的朋友带来小小的帮助。

example.zip (2.4 KB)
下载次数: 336

查看图片附件

13
顶

8
踩

分享到：

极限法的哲学思考 | 关于JAVA内存泄漏问题注意事项

2008-11-02 14:01
浏览 8088
评论(26)
分类:Web前端
查看更多

26 楼 daoyongyu 2008-11-21

谢谢楼主分享。虽然有js的框架很方便实现。但掌握基础更重要！

25 楼 lionkingzw 2008-11-20

敢于发表自己的想法，本身很好的，继续加油，呵呵……能虚心接受改进就更好了！
期待ing……

24 楼 tryonmind 2008-11-18

自己的方法自己的思路练练慢慢提高

23 楼 ivyshark 2008-11-07

lz写的很啰嗦

22 楼 nenyalanye_1 2008-11-04

虽然不是最好的，还是支持下

21 楼 mysoko 2008-11-04

怎么写的代码？

	$("#search_all").click(function(){
		if($(this).attr("checked")==true){
			$("input[@type=checkbox][@name='search_item']").each(function() {
				$(this).attr("checked", true);
			});
		}else{
			$("input[@type=checkbox][@name='search_item']").each(function() {
				$(this).attr("checked", false);
			});
		}
	});

20 楼 heyong2882008 2008-11-04

19 楼 caixicai 2008-11-04

.不用这么多行代码吧。。。简单复杂化。。。

18 楼 playfish 2008-11-04

stephen830 写道

playfish 写道这么简单的js也顶这么高&nbsp;&nbsp; 随便jquery什么的整个就好了这只能证明公众的眼睛是雪亮的。你可以用jquery写个同样功能看看有多少朋友来支持你？先进的未必是合适的，适合自己才是最好的。

这个js写得并不好。

17 楼 aids198311 2008-11-04

说用JQUERY的就别说了
你们怎么不说,用EXT还不需要代码呢!直接就有实现了!

16 楼 stephen830 2008-11-03

toby941 写道

Jquery的实现。排版有点乱
....

感谢toby941提供的Jquery方法，因为对这个不了解，也不敢妄加评论。

15 楼 toby941 2008-11-03

Jquery的实现。排版有点乱

//selectAll
jQuery(":checkbox:eq(0)").click(function() {
     jQuery(":checkbox:gt(0):enabled")).attr("checked", this.attr("checked"));
  
});

//监听子checkbox状态
    jQuery(":checkbox:gt(0)").each(function() {
        jQuery(this).click(function() {
 if (jQuery.makeArray(jQuery(":checkbox:gt(0):enabled")).length == jQuery.makeArray(jQuery(":checkbox:gt(0):checked")).length) {
	jQuery(":checkbox:eq(0)").attr("checked", true);
} else {
jQuery(":checkbox:eq(0)").attr("checked", false);
			}
		});
	});

14 楼 stephen830 2008-11-03

playfish 写道

这么简单的js也顶这么高   随便jquery什么的整个就好了

这只能证明公众的眼睛是雪亮的。你可以用jquery写个同样功能看看有多少朋友来支持你？
先进的未必是合适的，适合自己才是最好的。

13 楼 playfish 2008-11-03

这么简单的js也顶这么高

随便jquery什么的整个就好了

12 楼 ruvuoai 2008-11-03

还是用jquery吧

11 楼 yangpeihai 2008-11-03

喜欢简单，支持stephen830

10 楼 shanghui_12 2008-11-03

哈，楼上厉害！

9 楼 stephen830 2008-11-03

shanghui_12 写道

提供一个我用的方法：
Java代码 function onSelectAll()   {   for(var i = 0;i<document.forms.form1.length;i++){          if(document.forms.form1.elements[i].type=="checkbox"){              if(checkAll.checked==true){              document.forms.form1.elements[i].checked=true;}              else{              document.forms.form1.elements[i].checked=false;              }          }      }   }  function onSelectAll()
{
for(var i = 0;i<document.forms.form1.length;i++){
if(document.forms.form1.elements[i].type=="checkbox"){
if(checkAll.checked==true){
document.forms.form1.elements[i].checked=true;}
else{
document.forms.form1.elements[i].checked=false;
}
}
}
}

直接改成下面的：

function onSelectAll()  
{  
    for(var i = 0;i<document.forms.form1.length;i++){
         if(document.forms.form1.elements[i].type=="checkbox"){  
             document.forms.form1.elements[i].checked=checkAll.checked;
         }  
    }  
}

8 楼 qiancaoduwu 2008-11-03

还是简单点好！

7 楼 hanbin51987 2008-11-03

恩其实楼主的就是复杂了点
楼上的兄弟发的很简练
我写的时候也是这么写的来着

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论