• 复选框全选/全部选


    复选框全选/全部选

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript">
    			window.onload = function() {
    				/*
    					全选按钮点击按钮以后,四个多选框全部被选中
    				*/
    				// 为idcheckedAllBtn的按钮绑定一个单击相应函数
    				var item = document.getElementsByName('items');
    				
    				var checkedAllBtn = document.getElementById('checkedAllBtn');
    				checkedAllBtn.onclick = function() {
    					//获取四个多选框items
    					
    					// 遍历items
    					for (var i = 0; i < item.length; i++) {
    						// 设置四个多选框变成选中状态
    						// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
    						item[i].checked = true;
    					}
    				}
    
    				// 为checkedNoBtn的按钮绑定一个单击相应函数
    				var checkedNoBtn = document.getElementById('checkedNoBtn');
    				checkedNoBtn.onclick = function() {
    					//获取v
    					// 遍历items
    					for (var i = 0; i < item.length; i++) {
    						// 设置四个多选框变成选中状态
    						// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
    						item[i].checked = false;
    					}
    				}
    				
    				// 为checkedRevBtn的按钮绑定一个单击相应函数
    				var checkedRevBtn = document.getElementById('checkedRevBtn');
    				checkedRevBtn.onclick = function() {
    					//获取四个多选框items
    					
    					// 遍历items
    					for (var i = 0; i < item.length; i++) {
    						// 设置四个多选框变成选中状态
    						// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
    						item[i].checked = !item[i].checked;
    					}
    				}
    				
    				// 为sendBtn的按钮绑定一个单击相应函数
    				var sendBtn = document.getElementById('sendBtn');
    				sendBtn.onclick = function() {
    					//获取四个多选框items
    					
    					// 遍历items
    					console.log(123);
    					for (var i = 0; i < item.length; i++) {
    						// 设置四个多选框变成选中状态
    						// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
    						if(item[i].checked){
    							console.log(item[i].value);
    						}
    					}
    				}
    				
    				//为checkedAllBox的复选框绑定一个单击相应函数
    				var checkedAllBox = document.getElementById('checkedAllBox');
    				checkedAllBox.onclick=function(){
    					
    					for (var i = 0; i < item.length; i++) {
    						// 设置四个多选框变成选中状态
    						// 通过多选框的checked属性可以来获取或者设置复选框是否被选中
    						item[i].checked=this.checked;
    					}
    				}
    				//为四个多选框分别绑定点击响应函数
    				for (var i = 0; i<item.length;i++){
    					item[i].onclick=function(){
    						//将checkedAllBox设置为选中状态
    						checkedAllBox.checked=true;
    						for(var j=0;j<item.length;j++){
    							// 判断四个多选框是否是全选
    							if(!item[j].checked){
    								// 一旦进入判断,则证明不是全选状态
    								// 将checkedAllBox设置为没有选中状态
    								checkedAllBox.checked=false;
    								
    								// 一旦进入判断  则已经得出结果  不用再继续执行循环
    								break;
    							}
    						}
    						
    					}
    				}
    				
    			}
    		</script>
    	</head>
    	<body>
    		<form action="" method="post">
    			你爱好的运动是什么?<input type="checkbox" id="checkedAllBox" value="" /><label for="checkedAllBox">全选/全不选</label>
    			<br />
    			<input type="checkbox" name="items" id="1" value="足球" /><label for="1">足球</label>
    			<input type="checkbox" name="items" id="2" value="篮球" /><label for="2">篮球<label>
    			<input type="checkbox" name="items" id="3" value="羽毛球" /><label for="3">羽毛球</label>
    			<input type="checkbox" name="items" id="4" value="乒乓球" /><label for="4">乒乓球</label>
    			<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>