javascript基础（Dom查询练习）（二十七）

最新推荐文章于 2021-12-02 22:50:11 发布

咸鸭蛋炒饭

最新推荐文章于 2021-12-02 22:50:11 发布

阅读量419

点赞数

分类专栏： HTML5基础篇文章标签： dom html javascript

本文链接：https://blog.csdn.net/u010853130/article/details/55044059

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">

	window.onload = function(){
		
		//获取四个多选框的对象
		var items = document.getElementsByName("items");
		
		//获取全选全不选多选框
		var checkedAllBox = document.getElementById("checkedAllBox");
			
		/*
		 * 全选按钮
		 * 	- 点击按钮以后，将四个多选框全都选中
		 */
		
		//1.#checkedAllBtn
		//为全选按钮绑定一个单击响应函数
		var checkedAllBtn = document.getElementById("checkedAllBtn");
		checkedAllBtn.onclick = function(){
			
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//将多选框设置为选中状态
				/*
				 * 通过checked属性可以设置多选框的选中状态，
				 * 	如果checked属性为true，则多选框被选中
				 * 	如果为false，则多选框不选中
				 */
				items[i].checked = true;
			}
			
			//设置全选多选框选中
			checkedAllBox.checked = true;
			
			
		};
		
		/*
		 * 全不选按钮，
		 * 	点击按钮以后，四个多选框都变成没选中的状态
		 */
		//2.#checkedNoBtn
		//为checkedNoBtn绑定单击响应函数
		var checkedNoBtn = document.getElementById("checkedNoBtn");
		checkedNoBtn.onclick = function(){
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//将items设置为没选中的状态
				items[i].checked = false;
			}
			
			//设置全选多选框不选中
			checkedAllBox.checked = false;
		};
		
		
		/*
		 * 反选按钮
		 * 	- 点击按钮以后，选中的变成没选中，没选中的变成选中
		 */
		//3.#checkedRevBtn
		var checkedRevBtn = document.getElementById("checkedRevBtn");
		checkedRevBtn.onclick = function(){
			
			//将全选全不选，默认设置为选中状态
			//默认四个多选框全都被选中
			checkedAllBox.checked = true;
			
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//判断items是否选中，通过checked属性可以判断一个多选框是否选中
				/*if(items[i].checked){
					//如果为true，则证明已选中，则设置为false
					items[i].checked = false;
				}else{
					//证明没选中，则设置true
					items[i].checked = true;
				}*/
				
				items[i].checked = !items[i].checked;
				
				//四个多选框中只要有一个没选中，则就不是全选状态					
				if(!items[i].checked){
					//进入判断，则证明有没选中的，不是全选状态
					checkedAllBox.checked = false;
				}
			}
			
			
				
			
		};
		
		
		/*
		 * 提交按钮
		 * 	- 点击按钮以后，将选中的内容弹出
		 */
		//4.#sendBtn
		var sendBtn = document.getElementById("sendBtn");
		sendBtn.onclick = function(){
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//判断多选框是否被选中
				if(items[i].checked){
					//输出items的value属性值
					alert(items[i].value);
				}
			}
		};
		
		/*
		 * 全选/全不选的多选框
		 * 	- 当它选中，其余四个多选框也选中
		 * 		当它取消选中，其余四个多选框也不选中
		 */
		//5.#checkedAllBox
		//为checkedAllBox绑定一个单击响应函数
		checkedAllBox.onclick = function(){
			
			/*
			 * this
			 * 	- 在事件的响应函数中，事件是为谁绑定的this就是谁
			 */
			//alert(this == checkedAllBox);
			
			
			//遍历四个多选框
			for(var i=0 ; i<items.length ; i++){
				//设置多选框的状态
				items[i].checked = this.checked;
			}
		};
		
		/*
		 * 当四个多选框的状态改变时，需要更新全选全不选的状态
		 */
		//6.items
		//为四个多选框，都绑定一个单击响应函数
		for(var i=0 ; i<items.length ; i++){
			items[i].onclick = function(){
				
				//将全选全不选，默认设置为选中状态
				//默认四个多选框全都被选中
				checkedAllBox.checked = true;
				
				//判断四个多选框是否全都被选中
				//遍历四个多选框
				for(var j=0 ; j<items.length ; j++){
					//判断是否选中
					//四个多选框中只要有一个没选中，则就不是全选状态					
					if(!items[j].checked){
						//进入判断，则证明有没选中的，不是全选状态
						checkedAllBox.checked = false;
						//一旦进入判断，则结果以确定，没有在循环的必要了
						break;
						
					}
				}
				
				
			};
		}
	};
	
</script>
</head>
<body>

	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<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" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>

</body>
</html>

咸鸭蛋炒饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript基础（Dom查询练习）（二十七）

1.练习全选练习 window.onload = function(){ //获取四个多选框的对象 var items = document.getElementsByName("items"); //获取全选全不选多选框 var checkedAllBox = document.getElementById("checkedAllBox");
复制链接

扫一扫