<
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的状态。