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

最新推荐文章于 2024-05-16 09:09:56 发布

iteye_9633

最新推荐文章于 2024-05-16 09:09:56 发布

阅读量161

点赞数

分类专栏： javaScript 文章标签： J# JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/iteye_9633/article/details/82073248

版权

javaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该文档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" οnclick="doCheck(this)" /> <br/>
        复选框1：<input type="checkbox" οnclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
        复选框2：<input type="checkbox" οnclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
        复选框3：<input type="checkbox" οnclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
        复选框4：<input type="checkbox" οnclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" /> <br/>
        复选框5：<input type="checkbox" οnclick="toChkSon(this.checked); "id="chkMsgId23" name="chkMsgId23" />
  </body>
</html>

大龙

2011/06/09

iteye_9633

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js控制复选框全选、全不选

该文档v2.0版本链接http://dalongxn.iteye.com/blog/1850347 上次有需求，就自己写了个文本框全选、全不选的js 为了以后方便，就在这里保存下吧。&lt;html&gt; &lt;head&gt; &lt;title&gt;复选框全选、全不选&lt;/title&gt; &lt;script type="te...
复制链接

扫一扫

专栏目录