Html表格全选对应的javascript

浏览数：28 / 时间：2015年06月08日

 1 <script type="text/javascript">
 2     //全选功能
 3     $("table th input:checkbox").on(
 4             "click",
 5             function() {
 6                 var that = this;
 7                 $(this).closest("table").find("tr > td:first-child input:checkbox").each(function() {
 8                     this.checked = that.checked;
 9                     if(this.checked){
10                         $(this).parents("tr").addClass("success");//success是一个颜色类样式
11                     }else{
12                         $(this).parents("tr").removeClass("success");
13                     }
14                 });
15                 
16             });
17     //单击行选中
18     var checkLine = function(e) {
19         $(e).find("td:first-child input").each(function(){
20             this.checked=!this.checked;
21             if(this.checked){
22                 $(e).addClass("success");
23             }else{
24                 $(e).removeClass("success");
25             }
26         });
27         fullCkOrNot();
28     }
29     //checkbox单击事件
30     $("table tr td input:checkbox").on("click",function(){
31         this.checked=!this.checked;
32         fullCkOrNot();
33     });
34     //全选checkbox响应其他checkbox的选中事件
35     var fullCkOrNot=function(){
36         var allCB=$("table th input:checkbox").get(0);
37         if($("table tr td input:checkbox:checked").length==$("table tr td input:checkbox").length){
38             allCB.checked=true;
39         }else{
40             allCB.checked=false;
41         }
42     };
43 </script>

表格结构为：

 1 　　　　　　　　　　　　　　<table id="dataTable"
 2                                 class="table table-striped table-bordered table-hover">
 3                                 <thead>
 4                                     <tr>
 5                                         <th class="center"><label> <input type="checkbox"
 6                                                 class="ace" /><span class="lbl"></span>
 7                                         </label>
 8                                         </th>
 9                                         <th>名称</th>
10                                         <th>权限</th>
11                                     </tr>
12                                 </thead>
13 
14                                 <tbody>
15                                     <c:forEach var="role" items="${roleList }">
16                                         <tr onclick="checkLine(this);">
17                                             <td class="center"><label><input type="checkbox"
18                                                     class="ace" name="checks" value="${user.id }"/> <span
19                                                     class="lbl"></span> </label></td>
20                                             <td>${user.name }</td>
21                                             <td>${user.rights }</td>
22                                         </tr>
23                                     </c:forEach>
24                                 </tbody>
25                             </table>