关于全选与各个子checkbox的实现-CFANZ编程社区

先上一下效果图

点击全选的时候按钮能够点击所有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');
        }
    });