<table class="table table-striped table-bordered table-hover"> <thead> <tr> <th class="text-center" width="40"> <input type="checkbox"> </th> <th>名稱</th> <th>Slug</th> <th class="text-center" width="100">操作</th> </tr> </thead> <tbody> <tr> <td class="text-center"> <input type="checkbox"> </td> <td>未分類</td> <td>uncategorized</td> <td class="text-center"> <a href="javascript:;" class="btn btn-info btn-xs">編輯</a> <a href="javascript:;" class="btn btn-danger btn-xs">刪除</a> </td> </tr> </tbody> </table>

這個是根據tbody的checkBox的狀態來判斷thead的checkBox的狀態。然後做相應的事件。在此處可以通過模板引擎+ajax來渲染頁面或者通過php+mysql來渲染頁面。

    $('thead input[type=checkbox]').click(function(){ // 獲取自己的選中狀態 var thisChecked = $(this).prop('checked');
// 設定給tbody中的checkbox $('tbody input[type=checkbox]').prop('checked',thisChecked);
// 顯示隱藏 批量刪除 if(thisChecked==true){ $('.page-action a').fadeIn(); }else{ $('.page-action a').fadeOut(); } })
$('tbody').on('click','input[type=checkbox]',function(){ // 總個數 var totalNum = $('tbody input[type=checkbox]').length; // 選中個數 var checkedNum = $('tbody input[type=checkbox]:checked').length;
// 設定 頂部的選中狀態 $('thead input[type=checkbox]').prop('checked',totalNum==checkedNum);
if(checkedNum!=0){ $('.page-action a').fadeIn(); }else{ $('.page-action a').fadeOut(); } })

這個是通過選中狀態來控制.page-action a的狀態。