多选框的全选和反选

来源:互联网 发布:云计算行业发展趋势 编辑:程序博客网 时间:2024/06/07 02:04

html:

<span style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255);"></span><pre name="code" class="javascript"><pre name="code" class="html"><span style="font-weight: normal;"><span style="white-space:pre"></span><table><thead><tr><th><input type="checkbox" id="chkAll">全选</th></tr></thead><tbody><tr><td><input type="checkbox"></td></tr><tr><td><input type="checkbox"></td></tr><tr><td><input type="checkbox"></td></tr></tbody></table></span>


jQuery:  

//全选
$('#chkAll').bind('click',function(e){
$('tbody input[type=checkbox]').prop('checked',$(this).prop('checked'));
$(this).prop('checked',$('tbody :checked').length==$('tbody tr').length);
});
/*******************************************************************************************/
//反选
$('tbody input[type=checkbox]').bind('click', function(e) { /* Act on the event */
$('#chkAll').prop('checked',$('tbody :checked').length==$('tbody tr').length);
});




0 0
原创粉丝点击