<!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>
<style>
*{
margin: 0;
padding: 0;
}
th {
background-color: #09c;
font: blod 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone11</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone12</td>
<td>9000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad</td>
<td>9500</td>
</tr>
</tbody>
</table>
<script>
// 1.全选按钮的做法：让下面所有复选框的选定状态跟着全选按钮的选中状态走
// 获取元素
var j_cbAll = document.querySelector("#j_cbAll");//全选按钮
var j_tbs = document.querySelector("#j_tb").querySelectorAll("input");
// 注册事件
j_cbAll.onclick = function () {
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 2.下面的复选框按钮全部选中 上面的全选按钮才能被选中
// 给下面的复选框绑定点击事件 每点击一次 就要循环查看一下 这四个复选框的选定状态有没有被选定
for (var i = 0; i < j_tbs.length; i++) {//外层for循环是给复选框添加点击事件的
j_tbs[i].onclick = function () {
var flag = true;//当被点击时 为选中状态 然后循环检查下面按钮的状态
for (var i = 0; i < j_tbs.length; i++) {//来判断复选框的选定状态
// 按钮的选定状态一共就有两个 引入一个变量 true false
if (!j_tbs[i].checked) {//如果有一个按钮的状态没被点击 就表示此时为false 全选按钮就不被选中
flag = false;
break;//就是如果复选框中有一个没被选中就会退出循环
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>案例：js实现全选
猜你喜欢
转载自blog.csdn.net/m0_65085680/article/details/127176715
今日推荐
周排行