全选反选

最新推荐文章于 2024-02-20 17:37:17 发布

Adouer_

最新推荐文章于 2024-02-20 17:37:17 发布

阅读量196

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_33343042/article/details/85075987

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
		
		
		window.onload=function(){
			
			//获取name=interest的标签集合
			var interests=document.getElementsByName("interest");
			//全选函数
			document.getElementById("chkAll").onclick=function(){
				
				for(var i=0;i<interests.length;i++){
					interests[i].checked=this.checked;
				}
				
			}
			
			//反选函数
			document.getElementById("btnReverse").onclick=function(){
				
				for(var i=0;i<interests.length;i++){
					interests[i].checked=!interests[i].checked;
				}
				//检查全选
				checkAll();
			}
			
			//所有选中则全选前加对勾，有一项没选中，全选没对勾
			function checkAll(){
				var count=0;
				for(var i=0;i<interests.length;i++){
					if (interests[i].checked) {
						count++;
					}
				}
				
				if (count==interests.length) {
					document.getElementById("chkAll").checked=true;
				}else{
					document.getElementById("chkAll").checked=false;
				}
				
			}
			
			//单击每一个复选框时，检查全选框的状态
			for(var i=0; i<interests.length; i++){
				interests[i].onclick = checkAll;
			}
		}
		
	</script>
	
</head>

<body>
	<input type="checkbox" id="chkAll" />全选
	<input type="button" id="btnReverse" value="反选" />

	<br/><br/>

	<input type="checkbox" name="interest" value="唱歌" />唱歌
	<input type="checkbox" name="interest" value="跳舞" />跳舞
	<input type="checkbox" name="interest" value="跑步" />跑步
	<input type="checkbox" name="interest" value="游泳" />游泳
</body>

Adouer_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选反选

&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript"&gt; window.onload=function(){ //获取name=interest的标签集合 var interests=do
复制链接

扫一扫

专栏目录