全选全不选

• 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