<!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; } 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> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { $('#j_cbAll').click(function () { console.log($(this).prop('checked')); var isChecked = $(this).prop('checked');$('#j_tb').find('input').prop('checked', isChecked);
})$('#j_tb input').click(function () {
console.log($('#j_tb input').length); var totalCheckNum = $('#j_tb input').length; console.log($('#j_tb input:checked').length); var checkedCheckNum = $('#j_tb input:checked').length; var result = totalCheckNum == checkedCheckNum ? true : false; $('#j_cbAll').prop('checked', result); }) }) </script></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></body></html>