javascript基礎（Dom查詢練習）（二十七）

厚積薄發2017發表於2017-02-13
JavaScript

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>


 

相關文章