全选反选JavaScript实现

Myth丶恋晨 2022-05-27 12:36 357阅读 0赞

html代码

<label for="all">全选</label><input type="checkbox" id="all">
<div id="box">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>

JS代码

var all = document.getElementById("all");
    var aInput = document.querySelectorAll("#box>input");
    all.onclick = function () {
        if (this.checked) {
            for (var i = 0; i < aInput.length; i++) {
                aInput[i].checked = true;
            }
        } else {
            for (var i = 0; i < aInput.length; i++) {
                aInput[i].checked = false;
            }
        }
    };
    for (var i = 0; i < aInput.length; i++) {
        aInput[i].onclick = function () {
            var bStop = true;
            for (var K = 0; K < aInput.length; K++) {
                if (!aInput[K].checked) {
                    bStop = false;
                    break;
                }
            }
            if (bStop) {
                all.checked = true;
            } else {
                all.checked = false;
            }
        }
    }