js實現複選框全選邏輯

var count = 5
    var ziChangDu = count
    var ziXuanZhong = []
    var zong = document.getElementsByClassName('zong')[0]
    var zi = [].slice.call(document.getElementsByClassName('box'))
    zong.onclick = function (e) {
        e.stopPropagation()
        if ([].slice.call(zong.classList).indexOf('xuanzhong') == -1) {
            zong.classList.add('xuanzhong')

            zi.forEach(element => {
                if ([].slice.call(element.classList).indexOf('xuanzhong') == -1) {
                    element.classList.add('xuanzhong')
                    ziXuanZhong.push(element.innerHTML)
                }
            });
        } else {
            zong.classList.remove('xuanzhong')
            zi.forEach(element => {
                if ([].slice.call(element.classList).indexOf('xuanzhong') !== -1) {
                    element.classList.remove('xuanzhong')
                    ziXuanZhong.splice(ziXuanZhong.indexOf(element.innerHTML), 1)
                }
            });
        }
    }
    zi[0].onclick = function (e) {
        e.stopPropagation()
        if ([].slice.call(this.classList).indexOf('xuanzhong') == -1) {
            this.classList.add('xuanzhong')
            ziXuanZhong.push(this.innerHTML)
            if (ziXuanZhong.length == ziChangDu) {
                zong.classList.add('xuanzhong')
            }
        } else {
            this.classList.remove('xuanzhong')
            ziXuanZhong.splice(ziXuanZhong.indexOf(this.innerHTML), 1)
            zong.classList.remove('xuanzhong')
        }
    }
    zi[1].onclick = function (e) {
        e.stopPropagation()
        if ([].slice.call(this.classList).indexOf('xuanzhong') == -1) {
            this.classList.add('xuanzhong')
            ziXuanZhong.push(this.innerHTML)
            if (ziXuanZhong.length == ziChangDu) {
                zong.classList.add('xuanzhong')
            }
        } else {
            this.classList.remove('xuanzhong')
            ziXuanZhong.splice(ziXuanZhong.indexOf(this.innerHTML), 1)
            zong.classList.remove('xuanzhong')
        }
    }
    zi[2].onclick = function (e) {
        e.stopPropagation()
        if ([].slice.call(this.classList).indexOf('xuanzhong') == -1) {
            this.classList.add('xuanzhong')
            ziXuanZhong.push(this.innerHTML)
            if (ziXuanZhong.length == ziChangDu) {
                zong.classList.add('xuanzhong')
            }
        } else {
            this.classList.remove('xuanzhong')
            ziXuanZhong.splice(ziXuanZhong.indexOf(this.innerHTML), 1)
            zong.classList.remove('xuanzhong')
        }
    }
    zi[3].onclick = function (e) {
        e.stopPropagation()

        if ([].slice.call(this.classList).indexOf('xuanzhong') == -1) {
            this.classList.add('xuanzhong')
            ziXuanZhong.push(this.innerHTML)
            if (ziXuanZhong.length == ziChangDu) {
                zong.classList.add('xuanzhong')
            }
        } else {
            this.classList.remove('xuanzhong')
            ziXuanZhong.splice(ziXuanZhong.indexOf(this.innerHTML), 1)
            zong.classList.remove('xuanzhong')
        }
    }
    zi[4].onclick = function (e) {
        e.stopPropagation()
        if ([].slice.call(this.classList).indexOf('xuanzhong') == -1) {
            this.classList.add('xuanzhong')
            ziXuanZhong.push(this.innerHTML)
            if (ziXuanZhong.length == ziChangDu) {
                zong.classList.add('xuanzhong')
            }
        } else {
            this.classList.remove('xuanzhong')

            ziXuanZhong.splice(ziXuanZhong.indexOf(this.innerHTML), 1)
            zong.classList.remove('xuanzhong')
        }
    }
    
    
        <div class="box-zong zong">總</div>
<div class="box">子1</div>
<div class="box">子2</div>
<div class="box">子3</div>
<div class="box">子4</div>
<div class="box">子5</div>


    <style>
    div {
        position: relative;
        top: 100px;
        left: 200px;
        margin-top: 10px;
        width: 50px;
        height: 20px;
        border: 1px solid black;
    }

    .xuanzhong {
        background-color: red
    }
</style>
複製代碼