全选和反选事件

全选和反选事件

<input type="checkbox" name="checkAll"/>全选<br>
	<input type="checkbox" name="fx"/>反选<br>
	<input type="checkbox" name="cl"/>JS
	<input type="checkbox" name="cl"/>JAVA
	<input type="checkbox" name="cl"/>c#
	<input type="checkbox" name="cl"/>vb
	<script type="text/javascript">
	    // 给全选复选框绑定事件
	    var checkAll = document.getElementsByName("checkAll")[0];
	    var cls = document.getElementsByName("cl");
	    var fx = document.getElementsByName("fx")[0];
	     checkAll.onclick=function(){
			 for(var i=0,len=cls.length;i<len;i++){
				 	cls[i].checked=this.checked;
			 }
		 }
		 fx.onclick=function(){
			for(var i=0,len=cls.length;i<len;i++){
				 	cls[i].checked=!cls[i].checked;
			 }
		 }
		for(var i=0,len=cls.length;i<len;i++){
			cls[i].onclick=function(){
				var checkCount=0;
				for(var j=0,len=cls.length;j<len;j++){
					if(cls[j].checked){
					  checkCount++;
					 console.log(checkCount)
				   }
				}
				if(checkCount===cls.length){
					checkAll.checked=true;
				}else{
					checkAll.checked=false;
				}
			}
		}
	</script>

---

全选事件：点击全选，四个选项的checked
属性等于全选的checked属性。

反选事件：点击反选，四个选项的checked
属性取反。

四个选项：点击四个选项,当全部的checked
属性为true时，全选的checked的属性也为
true,反之相反。