JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能
版权声明:未经授权,内容严禁转载!
构建主体界面
编写 HTML 代码 和 CSS 代码,设计主题界面
<style> #user { width: 500px; text-align: center; } #user, #user th, #user td { border: 1px solid #000; border-collapse: collapse; } </style> <h1>管理员列表</h1> <table id="user"> <thead> <tr> <th><input type="checkbox">全选</th> <th>管理员ID</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1</td> <td>Tom</td> <td>删除修改</td> </tr> <tr> <td><input type="checkbox"></td> <td>2</td> <td>Jayvee</td> <td>删除修改</td> </tr> <tr> <td><input type="checkbox"></td> <td>3</td> <td>Mia</td> <td>删除修改</td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>Jack</td> <td>删除修改</td> </tr> </tbody> </table> <button id="reverse" type="button">反向选择</button> <button id="del" type="button">删除选定</button>
思路引导
设计完主体界面,接下来就要编写 JavaScript 脚本实现 全选/反选 功能,如果要单独建立一个新的 js 文件记得要在HTML界面进行导入命令,导入要在HTML界面最后。
因为浏览器加载页面的时候从上而下,如果将 JavaScript 文件放在 body上面,在浏览器加载 JavaScript 时HTML 文件的各个标签还没有加载,JavaScript中使用的标签会找不到,出现错误!
实现全选功能
编写JavaScript脚本代码实现 全选功能
// 1 .获取所有触发事件的元素:全选 四个复选框 反选 删除 // 全选 var chbAll = document.querySelector("#user thead tr th:first-child>input"); // console.log(chbAll); // 四个复选框 var chbs = document.querySelectorAll("#user tbody tr td:first-child>input"); // console.log(chbs); // 反选 var reverse = document.querySelector("#reverse"); // console.log(reverse); // 删除选定 var del = document.querySelector("#del"); // console.log(del); // 实现全选功能 // 绑定事件处理函数 chbAll.onclick = function () { //判断全选当前是否被选中 // 第一种方法 // if (chbAll.checked) { // // 如果选中四个复选框全选中 // // 循环四个复选框设置 checked 为选中 true // for (var i = 0; i < chbs.length; i++) { // chbs[i].checked = true; // } // }else { // // 如果没选中四个复选框全不选中 // // 循环四个复选框设置 checked 为不选中 false // for (var i = 0; i < chbs.length; i++) { // chbs[i].checked = false; // } // } // 第二种方法。 // 上面方法太冗余,循环设置四个复选框的选中状态和上面全选框一致即可 // 减少代码,简单! for (var i = 0; i < chbs.length; i++) { // chbs[i].checked = chbAll.checked; // 建议使用 this 关键字,以后万一改掉了 id 名字也不会影响~ chbs[i].checked = this.checked; } }
实现四个小复选框的功能
1. 点击其中一个小复选框要判断这四个小的复选框是否全被选中,如果四个全被选中需要将全选按钮勾上。
2. 如果点击其中一个取消了选中,那么全选按钮就是取消的。
总结:点击之后要判断这小复选框是被选中还是取消,如果是选中,就要判断这四个是不是全选中,如果全选中则全选框被选中,如果不是则选中自己。如果点击之后是取消选中,则全选框一定是取消选中的。
继续编写 JavaScript 脚本代码,实现四个小复选框功能
// 为 tbody 中的每一个 chb 绑定事件处理函数 for (var i = 0; i < chbs.length; i++) { chbs[i].onclick = function () { // 判断当前chb是选中韩式取消操作 if (this.checked) { // 如果选中,判断是否都是选中 // (查找tbody中是否有 未被选中的) var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)"); if (unchecked == null) { // 如果没有,设置全选被选中 chbAll.checked = true; } } else { // 如果是取消,则自己取消并且全选也取消 chbAll.checked = false; } } }
实现 反向选择 和 删除选定 功能
编辑 JavaScript 脚本代码实现 反向选择 和 删除选定 功能
// 反选 reverse.onclick = function () { // 循环 实现反选 for (var i = 0; i < chbs.length; i++) { chbs[i].checked = !chbs[i].checked; } // 如果选中,判断是否都是选中 // (查找tbody中是否有 未被选中的) var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)"); if (unchecked == null) { // 如果没有,设置全选被选中 chbAll.checked = true; } else { chbAll.checked = false; } } // 取消选定 del.onclick = function () { var checked = document.querySelectorAll("#user tbody tr td:first-child>input:checked"); if (checked !== null) { for (var i = 0; i < checked.length; i++) { checked[i].checked = false; } } if (chbAll.checked) chbAll.checked = false; }
完整案例代码
HTML + CSS
<style> #user { width: 500px; text-align: center; } #user, #user th, #user td { border: 1px solid #000; border-collapse: collapse; } </style> <h1>管理员列表</h1> <table id="user"> <thead> <tr> <th><input type="checkbox">全选</th> <th>管理员ID</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1</td> <td>Tom</td> <td>删除修改</td> </tr> <tr> <td><input type="checkbox"></td> <td>2</td> <td>Jayvee</td> <td>删除修改</td> </tr> <tr> <td><input type="checkbox"></td> <td>3</td> <td>Mia</td> <td>删除修改</td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>Jack</td> <td>删除修改</td> </tr> </tbody> </table> <button id="reverse" type="button">反向选择</button> <button id="del" type="button">删除选定</button> <script src="mJS.js"></script>
JavaScript 脚本
// 1 .获取所有触发事件的元素:全选 四个复选框 反选 删除 // 全选 var chbAll = document.querySelector("#user thead tr th:first-child>input"); // console.log(chbAll); // 四个复选框 var chbs = document.querySelectorAll("#user tbody tr td:first-child>input"); // console.log(chbs); // 反选 var reverse = document.querySelector("#reverse"); // console.log(reverse); // 删除选定 var del = document.querySelector("#del"); // console.log(del); // 实现全选功能 // 绑定事件处理函数 chbAll.onclick = function () { //判断全选当前是否被选中 // 第一种方法 // if (chbAll.checked) { // // 如果选中四个复选框全选中 // // 循环四个复选框设置 checked 为选中 true // for (var i = 0; i < chbs.length; i++) { // chbs[i].checked = true; // } // }else { // // 如果没选中四个复选框全不选中 // // 循环四个复选框设置 checked 为不选中 false // for (var i = 0; i < chbs.length; i++) { // chbs[i].checked = false; // } // } // 第二种方法。 // 上面方法太冗余,循环设置四个复选框的选中状态和上面全选框一致即可 // 减少代码,简单! for (var i = 0; i < chbs.length; i++) { // chbs[i].checked = chbAll.checked; // 建议使用 this 关键字,以后万一改掉了 id 名字也不会影响~ chbs[i].checked = this.checked; } } // 为 tbody 中的每一个 chb 绑定事件处理函数 for (var i = 0; i < chbs.length; i++) { chbs[i].onclick = function () { // 判断当前chb是选中韩式取消操作 if (this.checked) { // 如果选中,判断是否都是选中 // (查找tbody中是否有 未被选中的) var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)"); if (unchecked == null) { // 如果没有,设置全选被选中 chbAll.checked = true; } } else { // 如果是取消,则自己取消并且全选也取消 chbAll.checked = false; } } } // 反选 reverse.onclick = function () { // 循环 实现反选 for (var i = 0; i < chbs.length; i++) { chbs[i].checked = !chbs[i].checked; } // 如果选中,判断是否都是选中 // (查找tbody中是否有 未被选中的) var unchecked = document.querySelector("#user tbody tr td:first-child>input:not(:checked)"); if (unchecked == null) { // 如果没有,设置全选被选中 chbAll.checked = true; } else { chbAll.checked = false; } } // 取消选定 del.onclick = function () { var checked = document.querySelectorAll("#user tbody tr td:first-child>input:checked"); if (checked !== null) { for (var i = 0; i < checked.length; i++) { checked[i].checked = false; } } if (chbAll.checked) chbAll.checked = false; }
结束了,这个案例用在 购物车 还是蛮好的~
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!