<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .wrap{margin: 20px;width: 300px;} table{border: 1px solid silver;border-collapse: collapse;border-spacing: 0;} td,th{padding: 10px;border: 1px solid #D0D0D0;color: #404060;font-size: 14px;} th{background-color: #26A1AF;color: #fff;font-weight: bold;} </style> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script> $(document).ready( function() { // :checkbox表示 获取到表格body的所有checkbox var $tbCheckboxes = $("#j_tb").find(":checkbox"); // 全选和全不选 $("#j_cbAll").click(function () { // 使用prop这个方法来 判断 这个checkbox有没有被选中 var isChecked = $(this).prop("checked"); //alert(isChecked); if(isChecked) { // 让表格body里面的所有checkbox选中 // :checkbox 这个选择器会帮我们选择到所有的checkbox $tbCheckboxes.prop("checked", true); } else { // 让表格body里面的所有checkbox不选中 $tbCheckboxes.prop("checked", false); } }); // 单选控制全选checkbox选中或者不选中 $tbCheckboxes.click(function () { // 获取到所有被选中的checkbox的个数跟所有的checkbox个数 对比 // :checked表示：获取到body中所有被选中的checkbox // length属性表示 获取到元素的长度 var checkedLength = $("#j_tb").find(":checked").length; // 获取到所有的checkbox的长度 var allCheckboxLength = $tbCheckboxes.length; //alert(checkedLength); // 如果相等，就让全选按钮选中 if(checkedLength == allCheckboxLength) { $("#j_cbAll").prop("checked", true); } else { // 否则，让全选按钮不选中 $("#j_cbAll").prop("checked", false); } }); } ) </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>JavaScript</td> <td>前端与移动开发学院</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>css</td> <td>前端与移动开发学院</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>html</td> <td>前端与移动开发学院</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>jQuery</td> <td>前端与移动开发学院</td> </tr> </tbody> </table> </div> </body> </html>