批量操作的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的状态。