jquery 關(guān)于table的全選與反選

2018-7-3    seo達人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

控制表格的多選和反選，直接上代碼，順便安利一個小知識點：tr的底邊框不顯示的問題，解決辦法是：table{border-collapse:collapse;}     



    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!DOCTYPE html>
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <html>
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <head>
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <title></title>
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                <style>
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                *{margin:0;padding:0;}
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                table{border-collapse:collapse}
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                .detail_tb {width: 100%;border: 1px solid #ccc;}
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                .detail_tb .fied_header {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #ececec;}
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                .detail_tb .fied_header th {text-align: center;border-right: 1px solid #ccc;color: #333;font-size: 14px;}
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                .detail_tb .fied_header th input {vertical-align: middle;}
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                .detail_tb tr {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #fff;}
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                .detail_tb tr td {text-align: center;border-right: 1px solid #ccc;color: #666;font-size: 14px;}
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                .detail_tb tr td input {float: left;margin: 12px 5px 0 10px;}
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                .detail_tb tr td span {float: left;}
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                .detail_tb tr td select {display: inline-block;width: 90px;height: 24px;}
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                </style>
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                </head>
            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                <body>
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    
                <table class="detail_tb" >
            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                <thead>
            
    

        
    

    
    24. 

    
  24. 

        
    

            
    

            
    

        
    

        
    

            
    
                <tr class="fied_header">
            
    

        
    

    
    25. 

    
  25. 

        
    

            
    

            
    

        
    

        
    

            
    
                <th width="65"><input type="checkbox" value="number" id="number"> 序號</th>
            
    

        
    

    
    26. 

    
  26. 

        
    

            
    

            
    

        
    

        
    

            
    
                <th width="110">孩子姓名</th>
            
    

        
    

    
    27. 

    
  27. 

        
    

            
    

            
    

        
    

        
    

            
    
                <th width="130">家長電話</th>
            
    

        
    

    
    28. 

    
  28. 

        
    

            
    

            
    

        
    

        
    

            
    
                <th width="110">介紹人孩子姓名</th>
            
    

        
    

    
    29. 

    
  29. 

        
    

            
    

            
    

        
    

        
    

            
    
                <th width="130">介紹人電話</th>
            
    

        
    

    
    30. 

    
  30. 

        
    

            
    

            
    

        
    

        
    

            
    
                <th width="150">報名時間</th>
            
    

        
    

    
    31. 

    
  31. 

        
    

            
    

            
    

        
    

        
    

            
    
                <th width="100">分組情況</th>
            
    

        
    

    
    32. 

    
  32. 

        
    

            
    

            
    

        
    

        
    

            
    
                <th width="100">拉新數(shù)量</th>
            
    

        
    

    
    33. 

    
  33. 

        
    

            
    

            
    

        
    

        
    

            
    
                <th width="100">是否簽到</th>
            
    

        
    

    
    34. 

    
  34. 

        
    

            
    

            
    

        
    

        
    

            
    
                <th width="100">是否發(fā)獎</th>
            
    

        
    

    
    35. 

    
  35. 

        
    

            
    

            
    

        
    

        
    

            
    
                </tr>
            
    

        
    

    
    36. 

    
  36. 

        
    

            
    

            
    

        
    

        
    

            
    
                </thead>
            
    

        
    

    
    37. 

    
  37. 

        
    

            
    

            
    

        
    

        
    

            
    
                <tbody id="tbody">
            
    

        
    

    
    38. 

    
  38. 

        
    

            
    

            
    

        
    

        
    

            
    
                <tr>
            
    

        
    

    
    39. 

    
  39. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="65"><input type="checkbox" value="" id="" ><span>1</span></td>
            
    

        
    

    
    40. 

    
  40. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="110">張三</td>
            
    

        
    

    
    41. 

    
  41. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="130">13888888888</td>
            
    

        
    

    
    42. 

    
  42. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="110">李四</td>
            
    

        
    

    
    43. 

    
  43. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="130">13888888888</td>
            
    

        
    

    
    44. 

    
  44. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="150">2016/08/6 21:00</td>
            
    

        
    

    
    45. 

    
  45. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="100">
            
    

        
    

    
    46. 

    
  46. 

        
    

            
    

            
    

        
    

        
    

            
    
                <select name="" id="">
            
    

        
    

    
    47. 

    
  47. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">未分組</option>
            
    

        
    

    
    48. 

    
  48. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">1</option>
            
    

        
    

    
    49. 

    
  49. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">2</option>
            
    

        
    

    
    50. 

    
  50. 

        
    

            
    

            
    

        
    

        
    

            
    
                </select>
            
    

        
    

    
    51. 

    
  51. 

        
    

            
    

            
    

        
    

        
    

            
    
                </td>
            
    

        
    

    
    52. 

    
  52. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="100">33</td>
            
    

        
    

    
    53. 

    
  53. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="100">是</td>
            
    

        
    

    
    54. 

    
  54. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="100">
            
    

        
    

    
    55. 

    
  55. 

        
    

            
    

            
    

        
    

        
    

            
    
                <select name="" id="">
            
    

        
    

    
    56. 

    
  56. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">否</option>
            
    

        
    

    
    57. 

    
  57. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">獎品1</option>
            
    

        
    

    
    58. 

    
  58. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">獎品2</option>
            
    

        
    

    
    59. 

    
  59. 

        
    

            
    

            
    

        
    

        
    

            
    
                </select>
            
    

        
    

    
    60. 

    
  60. 

        
    

            
    

            
    

        
    

        
    

            
    
                </td>
            
    

        
    

    
    61. 

    
  61. 

        
    

            
    

            
    

        
    

        
    

            
    
                </tr>
            
    

        
    

    
    62. 

    
  62. 

        
    

            
    

            
    

        
    

        
    

            
    
                <tr>
            
    

        
    

    
    63. 

    
  63. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="65"><input type="checkbox" value="" id=""><span>2</span></td>
            
    

        
    

    
    64. 

    
  64. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="110">張四</td>
            
    

        
    

    
    65. 

    
  65. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="130">13888888888</td>
            
    

        
    

    
    66. 

    
  66. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="110">李四</td>
            
    

        
    

    
    67. 

    
  67. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="130">13888888888</td>
            
    

        
    

    
    68. 

    
  68. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="150">2016/08/6 21:00</td>
            
    

        
    

    
    69. 

    
  69. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="100">
            
    

        
    

    
    70. 

    
  70. 

        
    

            
    

            
    

        
    

        
    

            
    
                <select name="" id="">
            
    

        
    

    
    71. 

    
  71. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">未分組</option>
            
    

        
    

    
    72. 

    
  72. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">1</option>
            
    

        
    

    
    73. 

    
  73. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">2</option>
            
    

        
    

    
    74. 

    
  74. 

        
    

            
    

            
    

        
    

        
    

            
    
                </select>
            
    

        
    

    
    75. 

    
  75. 

        
    

            
    

            
    

        
    

        
    

            
    
                </td>
            
    

        
    

    
    76. 

    
  76. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="100">33</td>
            
    

        
    

    
    77. 

    
  77. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="100">是</td>
            
    

        
    

    
    78. 

    
  78. 

        
    

            
    

            
    

        
    

        
    

            
    
                <td width="100">
            
    

        
    

    
    79. 

    
  79. 

        
    

            
    

            
    

        
    

        
    

            
    
                <select name="" id="">
            
    

        
    

    
    80. 

    
  80. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">否</option>
            
    

        
    

    
    81. 

    
  81. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">獎品1</option>
            
    

        
    

    
    82. 

    
  82. 

        
    

            
    

            
    

        
    

        
    

            
    
                <option value="">獎品2</option>
            
    

        
    

    
    83. 

    
  83. 

        
    

            
    

            
    

        
    

        
    

            
    
                </select>
            
    

        
    

    
    84. 

    
  84. 

        
    

            
    

            
    

        
    

        
    

            
    
                </td>
            
    

        
    

    
    85. 

    
  85. 

        
    

            
    

            
    

        
    

        
    

            
    
                </tr>
            
    

        
    

    
    86. 

    
  86. 

        
    

            
    

            
    

        
    

        
    

            
    
                <tbody>
            
    

        
    

    
    87. 

    
  87. 

        
    

            
    

            
    

        
    

        
    

            
    
                </table>
            
    

        
    

    
    88. 

    
  88. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    89. 

    
  89. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    90. 

    
  90. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
            
    

        
    

    
    91. 

    
  91. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script type="text/javascript"> 
            
    

        
    

    
    92. 

    
  92. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 全選和反選
            
    

        
    

    
    93. 

    
  93. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#number").click(function () {
            
    

        
    

    
    94. 

    
  94. 

        
    

            
    

            
    

        
    

        
    

            
    
                var isChecked = $("#number").prop("checked");
            
    

        
    

    
    95. 

    
  95. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#tbody input").prop("checked", isChecked);
            
    

        
    

    
    96. 

    
  96. 

        
    

            
    

            
    

        
    

        
    

            
    
                })
            
    

        
    

    
    97. 

    
  97. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    98. 

    
  98. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 單獨選項控制全選
            
    

        
    

    
    99. 

    
  99. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#tbody input").click(function () {
            
    

        
    

    
    100. 

    
  100. 

        
    

            
    

            
    

        
    

        
    

            
    
                var allLength = $("#tbody input").length;
            
    

        
    

    
    101. 

    
  101. 

        
    

            
    

            
    

        
    

        
    

            
    
                var checkedLength = $("#tbody input:checked").length;
            
    

        
    

    
    102. 

    
  102. 

        
    

            
    

            
    

        
    

        
    

            
    
                if(allLength == checkedLength){
            
    

        
    

    
    103. 

    
  103. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#number").prop("checked",true);
            
    

        
    

    
    104. 

    
  104. 

        
    

            
    

            
    

        
    

        
    

            
    
                }else {
            
    

        
    

    
    105. 

    
  105. 

        
    

            
    

            
    

        
    

        
    

            
    
                $("#number").prop("checked",false);
            
    

        
    

    
    106. 

    
  106. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    107. 

    
  107. 

        
    

            
    

            
    

        
    

        
    

            
    
                });
            
    

        
    

    
    108. 

    
  108. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script>
            
    

        
    

    
    109. 

    
  109. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    110. 

    
  110. 

        
    

            
    

            
    

        
    

        
    

            
    
                </body>
            
    

        
    

    
    111. 

    
  111. 

        
    

            
    

            
    

        
    

        
    

            
    
                </html>
            
    

        
    

    
    112. 

    
  112. 

    
    113. 






    

    
  • 

    
    •


藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


分享本文至：

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔