布局：
div.wrap > table > thead + tbody
thead > tr > th *3 (第一个 th 里面是一个 input )
tbody > tr (*3 ) > td *3 (第一个 td 里面是一个 input ）
案例分析：
1，thead中的全选按钮点击，tbody 中的第一列所有按钮跟随 全选按钮的选中状态
2，tbody 中的按钮点击，判断是否四个都选中，如果都选中，上面的全选按钮选中，否则全选按钮不选中
关键代码
$("#j_cbAll").click(function(){ $("#j_tb input").prop("checked" , $(this).prop("checked")); }) $("#j_tb input").click(function(){ if($("#j_tb input:checked").length == $("#j_tb input").length) { $("#j_cbAll").prop("checked" , true); } else { $("#j_cbAll").prop("checked" , false); } })
完整代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; 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; text-align: center; } 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>田老师</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>西红柿鸡蛋</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>红烧狮子头</td> <td>田老师</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>日式肥牛</td> <td>田老师</td> </tr> </tbody> </table> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#j_cbAll").click(function () { //修改下面的哪些checkbox $("#j_tb input").prop("checked", $(this).prop("checked")); }); $("#j_tb input").click(function () { if($("#j_tb input:checked").length == $("#j_tb input").length){ $("#j_cbAll").prop("checked", true) }else { $("#j_cbAll").prop("checked", false) } }); }); </script> </body> </html>