全選和反選事件

<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,反之相反。