- A+
所属分类：Web前端
一、实现效果
- 点击全选按钮/取消全选，控制商品的全选或取消
- 每个商品的复选框都选中后，自动勾上全选按钮，或者商品任何一个复选框没有选中，取消全选
二、思路
- 就是由大的全选按钮，控制所有的复选框
- 小的复选框控制大的全选按钮
三、js中小的复选框控制大的全选框，用到了一个css伪类选择器
input:checked
举个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> input:checked{ width: 50px; height: 50px; } </style> </head> <body> <input type="checkbox" > </body> </html> 
四、完整的代码段
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style> div { margin: 100px auto; width: 500px; height: 300px; } table { border-collapse: collapse; width: 100%; height: 50%; text-align: center; } table tr th { background-color: #3899ce; } </style> </head> <body> <div> <table border="1"> <thead> <tr> <th><input type="checkbox" class="check-all">全选</th> <th>商品</th> <th>商家</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>小米手机</td> <td>小米</td> <td>1999</td> </tr> <tr> <td><input type="checkbox"></td> <td>小米净水器</td> <td>小米</td> <td>2999</td> </tr> <tr> <td><input type="checkbox"></td> <td>小米电视</td> <td>小米</td> <td>3999</td> </tr> </tbody> </table> </div> <script> const checkAll = document.querySelector('.check-all') const checkList = document.querySelectorAll('tbody input') //大复选框控制小复选框 checkAll.addEventListener('click', function () { //当点击全选按钮时，每一行的checked的状态会和全选/取消是一样的，所以要获取每一行的数据在进行更改 for (let i = 0; i < checkList.length; i++) { checkList[i].checked = this.checked } }) //由小的复选框控制大的复选框 //如果勾选完每一行数据后，全选按钮自动选上，或者取消勾选一行数据，全选按钮自动取消 //核心思想就是通过css的伪类选择器，找到选中的个数与总的复选框个数进行对比 //如果选中个数===总个数，全选按钮就勾上，否则取消 for (let i = 0; i < checkList.length; i++) { checkList[i].addEventListener('click', function () { checkAll.checked = document.querySelectorAll('tbody input:checked').length ===checkList.length }) } </script> </body> </html> 
