利用javaScript的事件委托制作一个带有全选按钮的多选框

HTML代码部分:

<div class="big">
    <div class="allbox">
        <input type="checkbox" value="" class="all">全选
    </div>
    <div class="selectbox">
            <input type="checkbox" value="" class="select">吃饭
            <input type="checkbox" value="" class="select">睡觉
            <input type="checkbox" value="" class="select">上班
            <input type="checkbox" value="" class="select">睡觉
            <input type="checkbox" value="" class="select">吃饭

    </div>
</div>

 

js部分:

 

var alls=document.querySelector(".all")

//利用...展开成为一个数组

var selectsel[...document.querySelectorAll(".select")]

var box=document.querySelector(".big")

//事件委托函数

box.addEventListener("click",function(e){

// 如果点击的是全选按钮

if(e.target===alls)

{

selectsel.forEach(function(item)

{

item.checked=alls.checked })

} // 遍历如果点击的是单选框按钮 selectsel.forEach(function(item) {item.onclick = change})

function change()

{ alls.checked=selectsel.every(function(item) { return item.checked })

}

})