需求：
菜名全勾选了，那么顶上的框也自动勾选，只要有一个勾没选上，上面的框就取消勾选点击全选，菜名有一个没勾的话，就全勾上，全勾上的话，就全部取消勾选 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"/> </th> <th>菜名</th> <th>饭店</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox"/> </td> <td>红烧肉</td> <td>111</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>西红柿鸡蛋</td> <td>222</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>鱼香茄子</td> <td>333</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>水煮鱼</td> <td>444</td> </tr> </tbody> </table> </div> <script> var ckAll = document.getElementById("j_cbAll"); var cks = document.getElementById("j_tb").getElementsByTagName("input"); //点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态 ckAll.onclick = function () { for (var i = 0; i < cks.length; i++) { cks[i].checked = this.checked; } }; for(var i=0;i<cks.length;i++){ cks[i].onclick=function () { var flag=true;//默认都被选中了 //判断是否所有的复选框都选中 for(var j=0;j<cks.length;j++){ if(!cks[j].checked){ flag=false; break; } } ckAll.checked=flag; }; } </script> </body> </html>