表格中行的全选和全不选

本文主要是介绍表格中行的全选和全不选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

（1）点击全选按钮, 所有选项都被选中；
（2）再次点击全选按钮, 所有选项都不被选中；
（3）当有一个选项没有被选中时, 全选按钮即不勾选；
（4）设置如图所示的CSS样式。
请添加图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>购物车全选</title><style>table {border-collapse: collapse;border: solid;margin: auto;width: 500px;}td,th {text-align: center;border: solid;padding: 2%;}#first {background-color: aqua;}</style></head><body><table><thead><tr id="first"><th><input type="checkbox" id="all"></th><th>商品</th><th>价钱</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td>小米 12</td><td>4999</td></tr><tr><td><input type="checkbox"></td><td>小米 11</td><td>3999</td></tr><tr><td><input type="checkbox"></td><td>小米 10</td><td>3999</td></tr><tr><td><input type="checkbox"></td><td>Air</td><td>200</td></tr></tbody></table><script>//  1.获取全选框、input框let all = document.querySelector('#all');let inputs = document.querySelectorAll('tbody tr input');// 2.全选框与input框联动all.onclick = function () {// console.log('是否选中', all.checked)     true/false//循环遍历 将 全选框 checked 的值赋给所有的input框for (let i = 0; i < inputs.length; i++) {inputs[i].checked = all.checked;}}// 3.input框与全选框联动// 循环遍历每一个input 执行bound方法for (let i = 0; i < inputs.length; i++) {inputs[i].onclick = bound;}function bound() {// 每一次点input count都赋值为0let count = 0;// 循环判断 每一项的checked 属性,如果是真 就+1for (let i = 0; i < inputs.length; i++) {if (inputs[i].checked) {count++;}}// 如果执行完后 和数组的长度一样 则全选的checke属性改为 trueif (count === inputs.length) {all.checked = true;} else {all.checked = false;}}</script>
</body></html>