最近在做一个项目，其中一个功能就是多选框的全选与反选。感觉很简单的小功能，一下子想不起来怎么实现了，很是耽误时间。我在想，我有必要整理下自己的一些小demo了，也方便以后再使用的时候能快速的完成功能。代码加注释很清晰，见代码。
1 <!DOCTYPE html> 2 <html> 3 4 <head lang="en"> 5 <meta charset="UTF-8"> 6 <title></title> 7 <style> 8 * { 9 padding: 0; 10 margin: 0; 11 } 12 .wrap { 13 width: 600px; 14 margin: 100px auto 0; 15 } 16 table { 17 border-collapse: collapse; 18 border-spacing: 0; 19 border: 1px solid #c0c0c0; 20 } 21 th, 22 td { 23 border: 1px solid #d0d0d0; 24 color: #404060; 25 padding: 10px; 26 } 27 th { 28 background-color: #09c; 29 font: bold 16px "微软雅黑"; 30 color: #fff; 31 } 32 td { 33 font: 14px "微软雅黑"; 34 } 35 tbody tr { 36 background-color: #f0f0f0; 37 } 38 39 tbody tr:hover { 40 cursor: pointer; 41 background-color: #fafafa; 42 } 43 </style> 44 <script src="jquery.js"></script> 45 <script> 46 $(function () { 47 //1.获取标题栏的checkbox 注册点击事件 48 $("#j_cbAll").click(function () { 49 50 //2.获取标题栏checkbox的状态 51 var isChecked = $(this).prop("checked"); 52 //3.设置其他checkbox的状态 53 $("#j_tb input").prop("checked",isChecked); 54 }); 55 56 //2.获取tbody中的checkbox 注册点击事件 57 $("#j_tb input").click(function () { 58 //2.1.获取所有tbody中checkbox的数量 59 var allCount = $("#j_tb input").length; 60 //2.2.获取所有被选中的checkbox的数量 61 var checkedCount = $("#j_tb input:checked").length; 62 //2.3.判断两个数量，如果选中的数量等于所有的数量 就让标题栏的checkbox选中 否则，不选中 63 if(checkedCount < allCount){ 64 $("#j_cbAll").prop("checked",false); 65 }else{ 66 $("#j_cbAll").prop("checked",true); 67 } 68 }); 69 }); 70 </script> 71 </head> 72 <body> 73 <div class="wrap"> 74 <table> 75 <thead> 76 <tr> 77 <th> 78 <input type="checkbox" id="j_cbAll" /> 79 </th> 80 <th>业务平台</th> 81 <th>项目名称</th> 82 <th>职工编码</th> 83 <th>职工名称</th> 84 <th>项目名称</th> 85 </tr> 86 </thead> 87 <tbody id="j_tb"> 88 <tr> 89 <td> 90 <input type="checkbox" /> 91 </td> 92 <td>基础平台</td> 93 <td>部门管理</td> 94 <td>部门管理</td> 95 <td>部门管理</td> 96 <td>部门管理</td> 97 </tr> 98 <tr> 99 <td> 100 <input type="checkbox" /> 101 </td> 102 <td>固定资产</td> 103 <td>部门管理</td> 104 <td>部门管理</td> 105 <td>部门管理</td> 106 <td>部门管理</td> 107 </tr> 108 <tr> 109 <td> 110 <input type="checkbox" /> 111 </td> 112 <td>运维管理</td> 113 <td>部门管理</td> 114 <td>部门管理</td> 115 <td>部门管理</td> 116 <td>部门管理</td> 117 </tr> 118 <tr> 119 <td> 120 <input type="checkbox" /> 121 </td> 122 <td>售后服务</td> 123 <td>人员管理</td> 124 <td>人员管理</td> 125 <td>人员管理</td> 126 <td>人员管理</td> 127 </tr> 128 </tbody> 129 </table> 130 </div> 131 </body> 132 133 </html>