全選全不選

• html

          <input id="check" name="check" type="checkbox" />全選全不選
  		<input id="box1" name="items"  type="checkbox" />
  		<input id="box2" name="items"  type="checkbox" />
  		<input id="box3" name="items"  type="checkbox" />
  		<input id="box4" name="items"  type="checkbox" />
  		
  		<br/>
  		<input type="button" id="checkAll" name="checkAll" value="全選" />
  		<input type="button" id="checkNo" name="checkNo" value="全不選" />
  		<input type="button" id="checkOff" name="checkOff" value="反選" />

   

• js

  <script type="application/javascript">
  			window.onload = function(){
  				
  				//全選按鈕
  				var checkAll = document.getElementById("checkAll");
  				//所有的操作按鈕
  				var items = document.getElementsByName("items");
  				//反選按鈕
  				var checkOff = document.getElementById("checkOff");
  				//全不選按鈕
  				var checkNo = document.getElementById("checkNo");
  				//全選全不選
  				var check = document.getElementById("check");
  				
  				//全選
  				checkAll.onclick = function(){
  					for(var i = 0; i < items.length; i++){
  					  items[i].checked = true;
  				    }
  					check.checked = true;
  				}
  				
  				//全不選
  				
  				checkNo.onclick = function(){
  					for(var i = 0; i < items.length; i++){
  					  items[i].checked = false;
  				    }
  					check.checked = false;
  				}
  				
  				//反選
  				
  				checkOff.onclick = function(){
  					check.checked = true;
  					for(var i = 0; i < items.length; i++){
  						if(items[i].checked){
  							items[i].checked = false;
  							check.checked = false;
  						}else{
  							items[i].checked = true;
  						}
  						
  				   }
  				}
  				
  				//全選全不選
  				var check = document.getElementById("check");
  				check.onclick = function(){
  					for(var i = 0; i < items.length; i++){
  							items[i].checked = check.checked;
  				   }
  				}
  				
  				//item選擇
  				for(var i = 0; i < items.length; i++){
  					items[i].onclick = function(){
  						
  						//判斷四個多選框是否全選
  						check.checked = true;
  					    for(var j = 0; j < items.length; j++){
  					    	
  							if(!items[j].checked){
  								//有一個是沒選，則總選的是沒選的
  								check.checked = false;
  							}
  							
  				   		}
  						
  						
  					}
  				}
  				
  			}
  			
  		</script>

   

• jq