前端---js（自学笔记19)（全选练习）

r囧r小猫 2023-03-02 07:39 34阅读 0赞

### 全选练习： ###

**checked：选中的意思，适用于单选按钮或复选框；**

**当checked=true，为选中。当checked=false，为不选。**

**在事件的响应函数中，响应函数是给谁绑定的this就是谁**

<!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(){
    		
    		
    		//获取四个多选框items
    		var items = document.getElementsByName("items");
    		//获取全选/全不选的多选框
    		var checkedAllBox = document.getElementById("checkedAllBox");
    		
    		/*
    		 * 全选按钮
    		 * 	- 点击按钮以后，四个多选框全都被选中
    		 */
    		
    		//1.#checkedAllBtn
    		//为id为checkedAllBtn的按钮绑定一个单击响应函数
    		var checkedAllBtn = document.getElementById("checkedAllBtn");
    		checkedAllBtn.onclick = function(){
    			
    			
    			//遍历items
    			for(var i=0 ; i<items.length ; i++){
    				
    				//通过多选框的checked属性可以来获取或设置多选框的选中状态
    				//alert(items[i].checked);
    				
    				//设置四个多选框变成选中状态
    				items[i].checked = true;
    			}
    			
    			//将全选/全不选设置为选中
    			checkedAllBox.checked = true;
    			
    			
    		};
    		
    		/*
    		 * 全不选按钮
    		 * 	- 点击按钮以后，四个多选框都变成没选中的状态
    		 */
    		//2.#checkedNoBtn
    		//为id为checkedNoBtn的按钮绑定一个单击响应函数
    		var checkedNoBtn = document.getElementById("checkedNoBtn");
    		checkedNoBtn.onclick = function(){
    			
    			for(var i=0; i<items.length ; i++){
    				//将四个多选框设置为没选中的状态
    				items[i].checked = false;
    			}
    			
    			//将全选/全不选设置为不选中
    			checkedAllBox.checked = false;
    			
    		};
    		
    		/*
    		 * 反选按钮
    		 * 	- 点击按钮以后，选中的变成没选中，没选中的变成选中
    		 */
    		//3.#checkedRevBtn
    		var checkedRevBtn = document.getElementById("checkedRevBtn");
    		checkedRevBtn.onclick = function(){
    			
    			//将checkedAllBox设置为选中状态
    			checkedAllBox.checked = true;
    			
    			for(var i=0; i<items.length ; i++){
    				
    				//判断多选框状态
    				/*if(items[i].checked){
    					//证明多选框已选中，则设置为没选中状态
    					items[i].checked = false;
    				}else{
    					//证明多选框没选中，则设置为选中状态
    					items[i].checked = true;
    				}*/
    				
    				items[i].checked = !items[i].checked;
    				
    				//判断四个多选框是否全选
    				//只要有一个没选中则就不是全选
    				if(!items[i].checked){
    					//一旦进入判断，则证明不是全选状态
    					//将checkedAllBox设置为没选中状态
    					checkedAllBox.checked = false;
    				}
    			}
    			
    			//在反选时也需要判断四个多选框是否全都选中
    			
    			
    			
    		};
    		
    		/*
    		 * 提交按钮：
    		 * 	- 点击按钮以后，将所有选中的多选框的value属性值弹出
    		 */
    		//4.#sendBtn
    		//为sendBtn绑定单击响应函数
    		var sendBtn = document.getElementById("sendBtn");
    		sendBtn.onclick = function(){
    			//遍历items
    			for(var i=0 ; i<items.length ; i++){
    				//判断多选框是否选中
    				if(items[i].checked){
    					alert(items[i].value);
    				}
    			}
    		};
    		
    		
    		//5.#checkedAllBox
    		/*
    		 * 全选/全不选 多选框
    		 * 	- 当它选中时，其余的也选中，当它取消时其余的也取消
    		 * 
    		 * 在事件的响应函数中，响应函数是给谁绑定的this就是谁
    		 */
    		//为checkedAllBox绑定单击响应函数
    		checkedAllBox.onclick = function(){
    			
    			//alert(this === checkedAllBox);
    			
    			//设置多选框的选中状态
    			for(var i=0; i <items.length ; i++){
    				items[i].checked = this.checked;
    			}
    			
    		};
    		
    		//6.items
    		/*
    		 * 如果四个多选框全都选中，则checkedAllBox也应该选中
    		 * 如果四个多选框没都选中，则checkedAllBox也不应该选中
    		 */
    		
    		//为四个多选框分别绑定点击响应函数
    		for(var i=0 ; i<items.length ; i++){
    			items[i].onclick = function(){
    				
    				//将checkedAllBox设置为选中状态
    				checkedAllBox.checked = true;
    				
    				for(var j=0 ; j<items.length ; j++){
    					//判断四个多选框是否全选
    					//只要有一个没选中则就不是全选
    					if(!items[j].checked){
    						//一旦进入判断，则证明不是全选状态
    						//将checkedAllBox设置为没选中状态
    						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>

![20200728120052987.gif][]

[20200728120052987.gif]: /images/20230208/5c4f00e57a9f490bb557abef22909da5.png