在前端網頁製作中，全選全消是常用的一種型別，在這裡，我就給大家分享一下倆中型別方法：
第一種：複選框控制全選全消
這種方法經常在淘寶天貓等購物網頁中見到，效果為：一點選全選複選框，他下面的子複選框就會全部選中，再次點選，就會取消，而子複選框全部點選後，全選複選框也會被選中
HTML程式碼：
全選/全不選


111
222
333
444
555

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部分：





111
222
333

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;
            }
        }
    }

以上就是我對複選框的兩種型別的總結，有不對的地方，歡迎指出，如果有收穫，也麻煩點選支援一下！