Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程
🌟 前言
欢迎来到我的技术小宇宙！🌌 这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。🔍
🤖 洛可可白：个人主页
🏠 个人博客：洛可可白博客
🐱 代码获取：bestwishes0203
📷 封面壁纸：洛可可白wallpaper
文章目录
Web实现表格单选全选与反选操作：JavaScript DOM基础与实例教程
在Web开发中，处理表格数据时，全选与反选功能是常见的交互需求。本文将通过一个简单的实例，介绍如何使用JavaScript DOM API来实现表格中的全选与反选操作，并讲解相关的JavaScript DOM基础知识。
实现效果
JavaScript DOM基础
DOM（Document Object Model）是文档对象模型的缩写，它将HTML或XML文档视为树结构，每个节点都是文档的一部分，可以是文档本身、元素、属性或文本内容。JavaScript中的DOM API提供了大量的方法和属性，允许开发者动态地访问和更新文档的内容、结构和样式。
实例：表格全选与反选操作
创建HTML表格结构
首先，我们需要创建一个包含商品信息的表格，并在表头添加一个全选复选框。
<div class="wrap">
<table>
<thead>
<tr>
<th><input type="checkbox" id="j_cbAll" /></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<!-- 商品列表 -->
</tbody>
</table>
</div>
使用JavaScript实现全选与反选
单选操作
// 获取元素
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
// 注册事件
j_cbAll.onclick = function() {
// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
全选操作
全选操作的目标是当用户点击全选复选框时，所有商品的复选框都应该被选中。
// 获取全选复选框元素
var j_cbAll = document.getElementById('j_cbAll');
// 获取所有商品复选框元素
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
// 为全选复选框绑定点击事件
j_cbAll.onclick = function() {
// 遍历所有商品复选框，设置与全选复选框相同的选中状态
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
};
反选操作
反选操作的目标是当任何一个商品复选框的状态发生变化时，检查所有复选框的状态，并据此更新全选复选框的选中状态。
// 为每个商品复选框绑定点击事件
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// 定义一个变量flag来标记是否所有复选框都被选中
var flag = true;
// 遍历所有商品复选框，如果发现有未选中的，设置flag为false
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; // 只要发现一个未选中的，就可以终止循环
}
}
// 根据flag的值更新全选复选框的选中状态
j_cbAll.checked = flag;
}
}
全部代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>单选全选反选</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<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>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
// 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
// 注册事件
j_cbAll.onclick = function() {
// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
console.log(this.checked);
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++) {
j_tbs[i].onclick = function() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>
结语
通过上述代码，我们实现了表格中的全选与反选功能。这个实例展示了如何使用JavaScript DOM API来操作HTML元素，并响应用户事件。全选与反选功能是表格交互中的基础，掌握这种操作对于开发复杂的数据表格应用至关重要。希望本文能帮助你更好地理解DOM操作，并将其应用到你的Web项目中。
如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀
🎉 往期精彩回顾
- 774阅读 · 29点赞 · 13收藏
缤纷浏览器 —— 一键换肤，个性随心换（H5实现浏览器换肤效果）
- 424阅读 · 8点赞 · 4收藏
- 612阅读 · 21点赞 · 17收藏
- 730阅读 · 25点赞 · 23收藏
Node.js快速入门：搭建基础Web服务器与实现CRUD及登录功能
- 818阅读 · 31点赞 · 16收藏
- 681阅读 · 11点赞 · 18收藏
爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析
- 1298阅读 · 25点赞 · 30收藏
- 1080阅读 · 14点赞 · 19收藏
- 1336阅读 · 35点赞 · 9收藏
Vue 3响应式系统详解：ref、toRefs、reactive及更多
- 1186阅读 · 23点赞 · 14收藏
- 1060阅读 · 27点赞 · 28收藏