js设置全选全不选反转

最新推荐文章于 2021-11-17 15:42:49 发布

NewBee.Mu

最新推荐文章于 2021-11-17 15:42:49 发布

阅读量258

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/NewBeeMu/article/details/98054144

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>03-全选全不选反选.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	//写在页面加载完毕之后绑定事件,因为没加载完毕之前,找不到标签对象
	//document.getElementById("checkall").οnclick=function(){}
	window.onload=function(){
		//全选绑定事件
		//1.找到标签对象 ID选择器
		var checkall = document.getElementById("checkall");
		//2.点击事件  全选
		checkall.onclick=function(){
			//获取所有复选框的控件
			var items = document.getElementsByName("items");
			//alert(items);
			for(var i=0;i<items.length;i++){
				//alert(items[i].checked);
				//复选框:两种方式boolean true false  string "checked" ""
				items[i].checked=true;
				
			}
			

	}
	//---------------------------------------------
	//1.找到标签对象 ID选择器
	var checkallNo = document.getElementById("checkallNo");
	//2.点击事件  全选
		checkallNo.onclick=function(){
			//获取所有复选框的控件
			var items = document.getElementsByName("items");
			//alert(items);
			for(var i=0;i<items.length;i++){
				//alert(items[i].checked);
				//复选框:两种方式boolean true false  string "checked" ""
				items[i].checked=false;
				
			}
		
	}
	/--------------------------------------------------------------
	//1.找到标签对象 ID选择器
	var check_reverse = document.getElementById("check_reverse");
	check_reverse.onclick=function(){
		//获取所有复选框的控件
		var items = document.getElementsByName("items");
		for(var i=0;i<items.length;i++){
			items[i].checked=!items[i].checked;
			
		}
		
		
	}
	//------------------------全选全不选---------------------------------------
	var input = document.getElementById("input");
	input.onclick=function(){
		//1.获取全选/全不选的状态
		//var status = input.checked;
		//获取所有复选框的控件
		var items = document.getElementsByName("items");
		for(var i=0;i<items.length;i++){
			items[i].checked=input.checked;
			
		}
		
		
	}
	}
	
 
</script>
 
</head>
<body>
	您的爱好很广泛!!!
	<br>
	<input type="checkbox" id="input" />全选/全不选
	<input type="checkbox" name="items" value="足球" />足球
	<input type="checkbox" name="items" value="篮球" />篮球
	<input type="checkbox" name="items" value="游泳" />游泳
	<input type="checkbox" name="items" value="唱歌" />唱歌
	<br>
	<input type="button" name="checkall" id="checkall" value="全选" />
	<input type="button" name="checkall" id="checkallNo" value="全不选" />
	<input type="button" name="checkall" id="check_reverse" value="反选" />
</body>
 
</html>