全选的实现（原生js）
编辑器制作效果展示：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td {border: 1px solid black;background-color: dodgerblue}
td:hover {background-color: deeppink}
</style>
</head>
<body>
<table>
<tr>
<td>
<label>全选.<input type="checkbox" name="xz" class="xx"></label>
</td>
</tr>
<tr>
<td>
<label>
1.<input type="checkbox" name="xz" class="x">
</label>
</td>
</tr>
<tr>
<td>
2.<input type="checkbox" name="xz" class="x">
</td>
</tr>
<tr>
<td>
3.<input type="checkbox" name="xz" class="x">
</td>
</tr>
<tr>
<td>
4.<input type="checkbox" name="xz" class="x">
</td>
</tr>
<tr>
<td>
5.<input type="checkbox" name="xz" class="x">
</td>
</tr>
</table>
<script>
var oxz = document.querySelectorAll(".x");
var oxx = document.querySelector(".xx");
oxx.addEventListener("click", run);
for (var i = 0; i < oxz.length; i++) {
oxz[i].addEventListener("click", run);
}
function run() {
if (this === oxx) {
for (var i = 0; i < oxz.length; i++) {
oxz[i].checked = oxx.checked;
}
}
var bol = true;
for (var i = 0; i < oxz.length; i++) {
if (!oxz[i].checked) {
bol = false;
}
}
oxx.checked = bol;
}
</script>
</body>
</html>
整理笔记时发现自己做的小demo,传上来了，么么哒！
来源：https://blog.csdn.net/jiepp/article/details/101149544