0
点赞
收藏
分享

微信扫一扫

关于全选与各个子checkbox的实现

at小涛 2022-07-12 阅读 50

先上一下效果图

点击全选的时候 按钮能够点击 所有checkbox被选中 (此处的包括真正的 checkbox)

关于全选与各个子checkbox的实现_复选框

当子复选框被一个个取消 全选按钮取消

关于全选与各个子checkbox的实现_复选框_02

全选取消 全部子checkbox取消 按钮不能点击 

关于全选与各个子checkbox的实现_复选框_03

当只有一个被选中 按钮也是可以实现点击的

关于全选与各个子checkbox的实现_复选框_04

 

1 $('.allcheck').click(function(){
2 $(this).toggleClass('on');
3 if($(this).hasClass('on')){
4 //当判断 allcheck被选中 每一个被选中 按钮可点击
5 $('.li').addClass('on');
6 $('.btn').removeClass('no');
7 $('input[type=checkbox]').attr('checked','checked');
8 }else{
9 $('.btn').addClass('no');
10 $('.li').removeClass('on');
11 $('input[type=checkbox]').removeAttr('checked');
12 }
13

/*每一子按钮被点击*/
$('.li').click(function(){
/*清*/
$('input[type=checkbox]').removeAttr('checked');
$(this).toggleClass('on').
$('.li.on').find('input[type=checkbox]').attr('checked','checked');
/*判断子复选框 只有有被选中 按钮可点击*/
if($('.li.on').length){
$('.btn').removeClass('no')
}else{
$('.btn').addClass('no');
$('.allcheck').removeClass('on');
}
});

  

 



举报

相关推荐

0 条评论