内容介绍
结合table表格和checkbox复选框实现单选与全选功能（本文只考虑功能实现，样式不要在意，虽然及丑，但我看不到 φ(>ω<*) ）。
一、效果图
:point_down: :point_down: :point_down: :point_down: :point_down:
三、实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>单选与全选</title>
</head>
<body>
<h1>单选与全选：</h1>
<table border="1">
<tr>
<th><input type="checkbox"></th>
<th>单元格2</th>
<th>单元格3</th>
<th>单元格4</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
<script>
var oneChecked = document.querySelectorAll('td>input');
var allChecked = document.querySelector('th>input');
allChecked.onclick = function() {
for (var i = 0; i < oneChecked.length; i++) {
if (this.checked) {
oneChecked[i].checked = true;
} else {
oneChecked[i].checked = false;
}
}
}
oneChecked.forEach(function(ele) {
ele.onclick = function() {
var checkedEle = document.querySelectorAll('td>input:not(:checked)');
if (!checkedEle.length) {
allChecked.checked = true;
} else {
allChecked.checked = false;
}
}
})
</script>
</body>
</html>三、注
理清 thead 与 tbody 复选框是否选中的关联关系即可。
标签：JavaScript，单选与全选
更多演示案例，查看 案例演示
欢迎评论留言!
