有时我们需要实现全选以及取消全选功能。使用数组方法就非常简单!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div><input type="checkbox" name="chall" id="">全选</div>
<ul>
<li><input type="checkbox" name="goods" id="">1</li>
<li><input type="checkbox" name="goods" id="">2</li>
<li><input type="checkbox" name="goods" id="">3</li>
<li><input type="checkbox" name="goods" id="">4</li>
</ul>
<script>
var shop = document.getElementsByName('goods'), //获取li的多选节点
butAll = document.getElementsByName('chall')[0];//获取全选按钮节点
var dom = Array.from(shop);//为了使用数组的every方法 利用Array.from将维数组转为数组
shop.forEach((item, index) => {
item.addEventListener('click', function () {//给li的多选逐一绑定选择事件
var result = dom.every((item, index) => { //判断li的多选框是都全选了
return item.checked
})
butAll.checked = false //默认为全选按钮为没全选
if (result) butAll.checked = true //如果every的返回值为true
})
})
butAll.addEventListener('click', function () { //全选按钮绑定事件
shop.forEach((item, index) => {
item.checked = butAll.checked //将li的input的checked与全选的checked进行绑定
})
})
</script>
</body>
</html>
效果如下: