需求分析：
切入点：交互 1.点击上方选择框：让下方选择框列表的checked值与自身保持一致 2.点击下方选择框列表：判断上方选择框列表状态 选中：所有的选择框checked值都是true 未选中：只要有一个选择框checked值是false
效果图
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } table { border-collapse: collapse; border: 1px solid #c0c0c0; width: 500px; margin: 100px auto; text-align: center; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; height: 24px; } td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } </style> </head> <body> <table> <tr> <th> <input type="checkbox" id="checkAll" />全选/全不选 </th> <th>地名</th> <th>标志建筑</th> <th>小吃</th> </tr> <tr> <td> <input type="checkbox" class="check" /> </td> <td>北京</td> <td>天安门</td> <td>烤鸭</td> </tr> <tr> <td> <input type="checkbox" class="check" /> </td> <td>广州</td> <td>广州塔</td> <td>早茶</td> </tr> <tr> <td> <input type="checkbox" class="check" /> </td> <td>重庆</td> <td>解放碑</td> <td>火锅</td> </tr> </table> <script> // 分析 当checkall选中的时候所有的小盒子check都要选中 // 而所有check选中之后 大盒子才选中 let checkall = document.getElementById('checkAll'); let checks = document.querySelectorAll('.check'); checkall.onclick = function () { checks.forEach(function (check) { // console.log(1); check.checked = checkall.checked; }) }; checks.forEach(function (check) { // 假设所有的check都选中了 check.onclick = function () { let z = true; checks.forEach(function (check) { if (check.checked == false) { z = false; }; }); checkall.checked = z; } }) </script> </body> </html>
