zoukankan      html  css  js  c++  java
  • Html表格全选对应的javascript

     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>
  • 相关阅读:
    进程对象的属性或方法详解
    进程理论以及开启子进程的两种方式
    计算机发展史(多道技术)
    基于socketserver实现的并发(tcp和udp)
    基于udp协议的套接字及udp协议粘包问题
    模拟ssh的远程网络传输
    周考题目及答案
    c/s架构搭建
    网络编程基础
    10.16模拟赛(湖南集训)
  • 原文地址:https://www.cnblogs.com/qneverever/p/4549548.html
Copyright © 2011-2022 走看看