`
dalongxn
  • 浏览: 31161 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

js控制复选框全选、全不选

阅读更多

该文档v2.0版本链接

http://dalongxn.iteye.com/blog/1850347

 

 

上次有需求,就自己写了个文本框全选、全不选的js

 为了以后方便,就在这里保存下吧。

<html>
  <head>
    <title>复选框全选、全不选</title>
    <script type="text/javascript">
		/**
		* 操作全选复选框事件
		**/
		function doCheck(obj)
		{
			var inputs=document.getElementsByTagName("input");
			for(var i=0;i<inputs.length;i++)
			{
				if(inputs[i].type=="checkbox" && inputs[i].id!="chkMsgId") //刷选出所有复选框
				{
					inputs[i].checked=obj.checked; 
				}
			}
		}
		
		/**
		* 复选框变化  全选按钮变化
		**/
		function toChkSon(obj)
		{
			if(obj==false) //当此复选框未选中 全选为未选
			{
				document.getElementById("chkMsgId").checked=false;
				return ;
			}
		
			var chkInputs=getCheckBox(); //获取所有复选框
			var j=0;
			for(var i=0;i<chkInputs.length;i++)
			{
				if(chkInputs[i].checked==obj)
					j++;
				else
					break;
			}	
			
			if(j==chkInputs.length) //当所有复选框为同一状态时 赋值全选同一状态
				document.getElementById("chkMsgId").checked=obj;
		}
		
		/**
		* 获取所有复选框
		**/
		function getCheckBox()
		{
			var inputs=document.getElementsByTagName("input");
			var chkInputs=new Array();
			var j=0;
			for(var i=0;i<inputs.length;i++)
			{
				if(inputs[i].type=="checkbox" && inputs[i].id!="chkMsgId") //刷选出所有复选框
				{
					chkInputs[j]=inputs[i];
					j++;
				}
			}
			return chkInputs;
		}	

    </script>
  </head>
  <body>
	全选:<input type="checkbox" name="chkMsgId" id="chkMsgId" onclick="doCheck(this)" /> <br/>
        复选框1:<input type="checkbox" onclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
        复选框2:<input type="checkbox" onclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
        复选框3:<input type="checkbox" onclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
        复选框4:<input type="checkbox" onclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
        复选框5:<input type="checkbox" onclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" />
  </body>
</html>

 

 

大龙

2011/06/09

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics