<!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>
<input type="checkbox" id="ipt" />全选
<table>
<tr id="dx">
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</tr>
</table>
</body>
<script>
var ipt = $("#ipt"); // 全选按钮
console.log(ipt);
var dx = $("#dx").querySelectorAll("input"); // 下面所有的复选框
console.log(dx);
// 全选按钮
ipt.onclick = function () {
// this.checked 它可以得到当前复选框的选中状态 如果是true 就是选中 ,如果是false 就是未选中
console.log(this.checked);
for (var i = 0; i < dx.length; i++) {
// 全选按钮赋值给所有单选按钮
dx[i].checked = this.checked;
}
};
// 2.下面复选框需要全部选中,上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击都要循环查看下面所有的复选框是否没有选中 如果有一个没被选中的,上面全选就不选中
for (var i = 0; i < dx.length; i++) {
dx[i].onclick = function () {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查这4个小按钮是否被选中
for (var i = 0; i < dx.length; i++) {
// 这个取反意思是,如果有一个没被选中就进去把flag变成false,然后flag给全选框,全选框不变
if (!dx[i].checked) {
flag = false;
}
}
// 全选框
ipt.checked = flag;
};
}
function $(e) {
return document.querySelector(e);
}
</script>
</html>
Javascript实现全选反选
最新推荐文章于 2024-05-06 18:26:11 发布