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; }
结束了，这个案例用在 购物车 还是蛮好的~