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;
}

 结束了，这个案例用在 购物车 还是蛮好的~