批量操作的checkbox选中状态

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


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页