【JavaScript】計數器+classList使用-純js案例：全選反選

這兩天做了一個全選反選的案例，用了幾種方法，剛開始寫的磕磕絆絆，聽老師講解後理清思路，再來寫就很容易了。其實還是寫代碼時候的思路問題。首先要分析功能，然後分步實現，不要攪在一起。下麵幾種方法為比較精簡的方法，用到classList屬性，剛開始寫的兩個方法都比較原始，所以相對比較複雜，就不放上來了。
案例的功能：
1、每個列表項li都能點擊切換選中和未選中狀態；
2、全選框能點擊切換選中和未選中狀態，點擊選中時，所有列表項li都選中，點擊未選中時，所有列表項都為未選中，只要有一個列表項li未選中，全選框切換為未選中狀態；
3、反選，點擊反選就切換列表項li的狀態；

classList

var a.className = "a h g m";
IE8以下不相容
節點.classList  類數組,節點所有類名的集合
["a","h","g","m"]
a.classList.remove("a","h");//移除a和h

.add() 新增類名
.remove() 移除類名
.toggle() 切換類名（有就加，沒有就減）
.contains()  判斷是否包含某個類名

        var Oul = document.getElementById("ul");
        var Ali = Oul.getElementsByTagName("li");
        var Oall = document.getElementById("all");
        var Oreverse = document.getElementById("reverse");
        Length = Ali.length;
        //為每個li添加點擊事件
        for(var i=0; i<Length; i++){
            Ali[i].onclick = function(){
                this.classList.toggle("checked");

                //判斷li是否全部被選中
                var full = true;
                for(var j=0; j<Length; j++){
                    //若有未選中的li
                    if(!Ali[j].classList.contains('checked')){
                        full = false;
                        break;
                    }
                }
                //修改全選框狀態
                Oall.classList[full ? "add":"remove"]("on");
            }
        }
        //為全選添加點擊事件
        Oall.onclick = function(){
            //獲取全選框狀態
            var bool = this.classList.contains('on');
            //根據狀態判斷是選中還是清除
            for(var i=0; i<Length; i++){
                Ali[i].classList[bool ? "remove":"add"]("checked");
            }
            //改變全選框狀態
            this.classList.toggle("on");
        }

        //為反選添加點擊事件
        Oreverse.onclick = function(){
            //每個li取反
            for(var i=0; i<Length; i++){
                Ali[i].classList.toggle("checked");
            }
            //判斷li是否全部被選中
            var full = true;
            for(var j=0; j<Length; j++){
                //若有未選中的li
                if(!Ali[j].classList.contains('checked')){
                    full = false;
                    break;
                }
            }
            //修改全選框狀態
            Oall.classList[full ? "add":"remove"]("on");
        }

計數器

var Oul = document.getElementById("ul");
        var Oli = document.getElementsByTagName("li");
        var Length = Oli.length;

        var Oall = document.getElementById("all");
        var Oback = document.getElementById("reverse");

        var count = 0;  //當前選中數
        //為每個li添加點擊事件
        for(var i = 0; i< Length; i++){
            Oli[i].onclick = function(){
                var non = this.classList;
                /*if(non.contains('checked')){
                    non.remove("checked");
                    count--;
                }else{
                    non.add("checked");
                    count++;
                }*/
                //判斷當前點擊li是去掉勾 還是 加上勾，從而對應的變化計數器
                non.contains('checked') ? count--:count++;
                //改變點擊的li狀態
                non.toggle("checked");
                //判斷是否全選，改變全選框狀態
                Oall.classList[count === Length ? "add":"remove"]("on");
            }
        }
        //為全選添加點擊事件
        Oall.onclick = function(){
            var bool;//判斷當前全選狀態，修改計數器的值
            if(this.classList.contains('on')){
                bool = false;
                count = 0;
            }else{
                bool = true;
                count = Length;
            }
            for(var i =0; i<Length; i++){
                Oli[i].classList[bool ? "add":"remove"]("checked");
            }
            //改變全選框狀態
            this.classList.toggle("on");
        }
        //為反選添加點擊事件
        Oback.onclick = function(){
            //修改計數器的值
            count = Length - count;
            for(var i = 0 ; i<Length; i++){
                Oli[i].classList.toggle("checked");
            }
            //判斷是否全選，改變全選框狀態
            Oall.classList[count === Length ? "add":"remove"]("on");
        }

checkbox

單選框和覆選框，他們個人的選中狀態，在js裡面呈現是以布爾值方式呈現的

• 選框節點.checked 得到一個布爾值
• 選框節點.checked = true; 將選框變成被選中狀態
• 選框節點.checked = false; 將選框變成不被選中狀態

通過js這樣操作的checked屬性，不會影響節點的標簽屬性