JavaScript计数器+classList使用-纯js案例：全选反选

Posted 2020-10-15 dqy95

这两天做了一个全选反选的案例，用了几种方法，刚开始写的磕磕绊绊，听老师讲解后理清思路，再来写就很容易了。其实还是写代码时候的思路问题。首先要分析功能，然后分步实现，不要搅在一起。下面几种方法为比较精简的方法，用到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属性，不会影响节点的标签属性