<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="checkAll">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td>¥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td>¥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td>¥5999</td>
</tr>
</table>
<script>
// 1. 获取元素 全选 和 ck小复选框
let checkAll = document.querySelector('#checkAll');
let cks = document.querySelectorAll('.ck');
let all = document.querySelector('.checkAll')
// 2. 事件监听 全选按钮
checkAll.addEventListener('click', () => {
// console.log(checkAll.checked);
// 需要把all.checked给下面三个小按钮
// 因为三个按钮在伪数组里面,需要通过遍历的方式,依次取出来给值
for (let i = 0; i < cks.length; i++) {
cks[i].checked = checkAll.checked;
cks[i].addEventListener('click', () => {
if(cks[i].checked == false) {
checkAll.checked = false;
all.innerHTML = '全选';
} else {
all.innerHTML = '取消';
}
})
}
// 当我们的全选按钮处于选中状态,则可以改为取消
if (checkAll.checked) {
all.innerHTML = '取消';
} else {
all.innerHTML = '全选';
}
})
// 3.小按钮做法 同时给多个元素绑定相同事件
for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', () => {
// 只要点击任何一个小按钮 都要遍历所有的小按钮
for (let j = 0; j < cks.length; j++) {
// 看看是不是有的按钮没有被选中
if(cks[j].checked == false) {
// 如果有fasle就退出循环
checkAll.checked = false;
all.innerHTML = '全选'
return
}
// 当我们的循环结束,如果代码走到这里,说明没有false,都被选中了,则全选按钮要选中
checkAll.checked = true;
all.innerHTML = '取消';
}
})
}
</script>
</body>
</html>
JavaScript之购物车全选反选案例
最新推荐文章于 2023-03-24 14:07:09 发布