全选和反选事件

全选和反选事件

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

转载于:https://www.cnblogs.com/lxystar/p/9922324.html