“全选/全不选”例子

 

 
<form action="" method="post">
	
	<input type="checkbox" id="check" value="全选/全不选"/>全选/全不选
	<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" name="checkall" id="checkAll" value="全选" />
	<input type="button" name="checkall" id="checkNo" value="全不选" />
	<input type="button" name="checkall" id="checkRev" value="反选" />

</form>



<script type="text/javascript">
	window.onload=function(){
		//全选
		document.getElementById("checkAll").onclick=function(){
			var itemsElements=document.getElementsByName("items");
			for(var i=0;i<itemsElements.length;i++){
				itemsElements[i].checked="checked";
			}
		};

		//全不选
		document.getElementById("checkNo").onclick=function(){
			var itemsElements=document.getElementsByName("items");
			for(var i=0;i<itemsElements.length;i++){
				itemsElements[i].checked=null;
			}
		};

		//反选
		document.getElementById("checkRev").onclick=function(){
			var itemsElements=document.getElementsByName("items");
			for (var i = 0; i < itemsElements.length; i++) {
				if(itemsElements[i].checked){
					itemsElements[i].checked=null;
				}else{
					itemsElements[i].checked="checked";
				}
			}
		};

		//全选/全不选
		document.getElementById("check").onclick=function(){
			var items=document.getElementsByName("items");
			for(var i=0;i<items.length;i++){
				items[i].checked=this.checked;
			}
		};
	};
</script>