前端：全选全消的两种类型

在前端网页制作中，全选全消是常用的一种类型，在这里，我就给大家分享一下俩中类型方法：
第一种：复选框控制全选全消
这种方法经常在淘宝天猫等购物网页中见到，效果为：一点击全选复选框，他下面的子复选框就会全部选中，再次点击，就会取消，而子复选框全部点击后，全选复选框也会被选中
HTML代码图片
(https://img2020.cnblogs.com/blog/2197210/202012/2197210-20201227172244629-1894808837.png)

JS代码：
var selectAll = document.getElementById("selectAll");
var aas = document.getElementsByName("aa");

    selectAll.onclick = function() {
        if (selectAll.checked) {
            for (var i = 0; i < aas.length; i++) {
                aas[i].checked = true;
            }
        } else {
            for (var i = 0; i < aas.length; i++) {
                aas[i].checked = false;
            }
        }
    }

    function aa() {
        var times = 0;
        for (var i = 0; i < aas.length; i++) {
            if (aas[i].checked) {
                times++;
            }
        }
        if (times == aas.length) {
            /* status=true; 是给status赋值，并没有改变标签*/
            selectAll.checked = true;
        } else {
            selectAll.checked = false;
        }
        //如果有一个没有选，全选框也不选
        if (times == 0) {
            selectAll.checked = false;
        }
    }

第二种类型：通过按钮控制复选框的状态：
这种类似是很简单的，效果为：点击全选按钮，所有的复选框就会全部选中，点击全不选按钮，所有的复选框就会全部取消。
不过我在此基础上添加了一个反选按钮，虽然网页制作不常用到这个功能，但感兴趣的小伙伴们可以学习一下。
HTML代码图片
(https://img2020.cnblogs.com/blog/2197210/202012/2197210-20201227172434930-842655470.png)

JS部分：
var selectAll = document.getElementById("selectAll");
var selectNode = document.getElementById("selectNode");
var invert = document.getElementById("invert");

    var aas = document.getElementsByName("aa");

    selectAll.onclick = function() {
        for (var i = 0; i < aas.length; i++) {
            if (aas[i] = "checkbox") {
                aas[i].checked = true;
            }
        }
    }

    selectNode.onclick = function() {
        for (var i = 0; i < aas.length; i++) {
            if (aas[i] = "checkbox") {
                aas[i].checked = false;
            }
        }
    }

    invert.onclick = function() {
        for (var i = 0; i < aas.length; i++) {
            if (aas[i].checked == true) {
                aas[i].checked = false;
            } else {
                aas[i].checked = true;
            }
        }
    }

以上就是我对复选框的两种类型的总结，有不对的地方，欢迎指出，如果有收获，也麻烦点击支持一下！