【Web APIs】JavaScript 操作多个元素 ④ ( 表格全选复选框案例 )
文章目录
- 一、核心要点解析 - 表格全选复选框案例
- 1、案例需求
- 2、复选框设置
- 3、获取 全选复选框 和 普通复选框
- 4、设置 全选复选框 逻辑
- 5、设置 普通复选框 逻辑
- 二、完整代码示例
- 1、代码示例
- 2、执行结果
一、核心要点解析 - 表格全选复选框案例
1、案例需求
在表格中 , 设置 多个 checkbox 复选框 表单 , 标题中的 复选框 是 " 全选复选框 " , 普通 表格行 中的 复选框 是 " 普通复选框 " , 受 全选复选框 控制 ;
2、复选框设置
复选框 是 input 表单 , 将 表单的 type 类型属性 设置为 checkbox , 就是设置了一个复选框 ;
<input type="checkbox" />
在 table 表格 中的 thead 标签元素 , 就是 表格的标题 , 在 该标签下 , 设置 " 全选复选框 " , 该 全选复选框 设置一个 id 属性 , 方便查找到该 元素 ;
<thead><tr><td><input type="checkbox" id="j_cbAll" /></td><th>姓名</th><th>年龄</th></tr></thead>
table 表格 中 tbody 标签 是 表格 的 内容 , 在 该标签下 , 设置 " 普通复选框 " ; 下面的代码中设置了 3 个普通复选框 ;
<tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>Tom</td><td>18</td></tr><tr><td><input type="checkbox" /></td><td>Jerry</td><td>12</td></tr><tr><td><input type="checkbox" /></td><td>Trump</td><td>74</td></tr></tbody>
3、获取 全选复选框 和 普通复选框
通过 id 选择器 , 调用 Document 对象的 getElementById , 获取对应 id 的标签 ;
" 全选复选框 " 元素 直接通过 调用 document.getElementById('j_cbAll') 代码即可获得 ;
" 普通复选框 " 元素 都定义在 table 表格的 <tbody id="j_tb"> 标签下 , 先通过 document.getElementById('j_tb') 获取 <tbody id="j_tb"> 标签元素 , 然后 通过 标签选择器 获取 tbody 标签下的 input 标签元素 ;
完整代码如下 :
// 获取 表格标题 中的 全选按钮复选框 元素 , 只有一个元素var j_cbAll = document.getElementById('j_cbAll');// 获取 标题内容 中的 普通按钮复选框 元素 , 有多个该元素var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
4、设置 全选复选框 逻辑
全选复选框 逻辑 , 就是 全选 和 取消全选 ;
- 全选复选框 选中 , 则 普通复选框 全部选中 ;
- 全选复选框 取消选中 , 则 普通复选框 全部取消选中 ;
就是 为所有的 普通复选框 设置 全选按钮复选框 的 选中状态 , true 是选中 , false 是未选中 ;
代码示例 :
// 注册 全选 和 取消全选 事件j_cbAll.onclick = function() {// 为所有的 普通复选框 设置 全选按钮复选框 的 选中状态 , true 是选中 , false 是未选中for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;}}
5、设置 普通复选框 逻辑
普通复选框 逻辑 如下 : 通过 普通复选框 的操作 , 影响 全选复选框 的 选中状态 ;
- 全选复选框 选中 : 表格 中的 普通复选框 全部选中 , 表格标题 中的 全选复选框 才会选中 ;
- 全选复选框 取消选中 : 为所有 普通复选框绑定点击事件 , 每次点击改变选中状态 , 循环检查 所有的 普通复选框 是否 有没有选中的 , 如果有任意一个没有选中 , 则 取消 全选复选框 的 选中状态
代码示例 :
// 2. 普通复选框 逻辑 : // 全选复选框 选中 : 表格 中的 普通复选框 全部选中 , 表格标题 中的 全选复选框 才会选中 ; // 全选复选框 取消选中 : 为所有 普通复选框绑定点击事件 , 每次点击改变选中状态 , 循环检查 所有的 普通复选框 是否 有没有选中的 , 如果有任意一个没有选中 , 则 取消 全选复选框 的 选中状态for (var i = 0; i < j_tbs.length; i++) {// 为 所有的 普通复选框 循环设置 点击状态j_tbs[i].onclick = function() {// 设置 全选复选框 的 选中状态 , 默认为 truevar flag = true;// 任意一个 普通复选框 点击 , 不管是 选中 还是 取消选中 , 都要检查 当前 是否全部选中 , // 如果 是 则 全选复选框 设置为 选中状态 // 如果 不是 则 全选复选框 设置为 取消选中状态for (var i = 0; i < j_tbs.length; i++) {// 只要有一个 普通复选框 没有选中 , 则 全选复选框 的 选中状态 就设置成了 falseif (!j_tbs[i].checked) {flag = false;break;}}j_cbAll.checked = flag;}}
二、完整代码示例
1、代码示例
完整代码示例 :
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Inline Style Operation Example</title><style>* {/* 取消默认内外边距样式 */margin: 0;padding: 0;}table {width: 400px;margin: 50px auto;text-align: center;border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: pink;}</style>
</head><body><table><thead><tr><td><input type="checkbox" id="j_cbAll" /></td><th>姓名</th><th>年龄</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>Tom</td><td>18</td></tr><tr><td><input type="checkbox" /></td><td>Jerry</td><td>12</td></tr><tr><td><input type="checkbox" /></td><td>Trump</td><td>74</td></tr></tbody></table><script>// 1.获取元素 获取的是 tbody 里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2. 利用循环绑定注册事件for (var i = 0; i < trs.length; i++) {// 3. 鼠标经过事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠标离开事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}// 获取 表格标题 中的 全选按钮复选框 元素 , 只有一个元素var j_cbAll = document.getElementById('j_cbAll');// 获取 标题内容 中的 普通按钮复选框 元素 , 有多个该元素var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');// 1. 全选 和 取消全选 // 注册 全选 和 取消全选 事件j_cbAll.onclick = function() {// 为所有的 普通复选框 设置 全选按钮复选框 的 选中状态 , true 是选中 , false 是未选中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() {// 设置 全选复选框 的 选中状态 , 默认为 truevar flag = true;// 任意一个 普通复选框 点击 , 不管是 选中 还是 取消选中 , 都要检查 当前 是否全部选中 , // 如果 是 则 全选复选框 设置为 选中状态 // 如果 不是 则 全选复选框 设置为 取消选中状态for (var i = 0; i < j_tbs.length; i++) {// 只要有一个 普通复选框 没有选中 , 则 全选复选框 的 选中状态 就设置成了 falseif (!j_tbs[i].checked) {flag = false;break;}}j_cbAll.checked = flag;}}</script>
</body></html>
2、执行结果
静态结果 :
完整执行过程 :
