zepto全选按钮之全选会根据按钮是否被全部选中更改状态

　　在做手机端二次开发购物车的时候，发现zepto全选，没找到，或者功能不是自己想要的

　　后来做好，分享给需要的人

 

全选或多选处理 

    var CheckAll = $('#items_check_all');
    var checkbox = $('input[name^="check"]');
    var removeUrl = '<{link app=b2c ctl=wap_cart act=remove}>';

 

    
初始化，把所有选中的加上状态

 if (CheckAll && checkbox) {
        $('.pt-h-item').addClass('active').css('background','#efefef');
    }

 
  全选或全不选

CheckAll.on("click",function(){
        if (this.checked){
            checkbox.prop('checked',true);
            //$('.pt-h-item').addClass('active').css('background','#efefef');
        }else{            
            checkbox.prop('checked',false);
            //$('.pt-h-item').removeClass('active').css('background','#fff');    
        }
    });

 
单选后反向关联全选按钮

  checkbox.on("click",function(){    
        var flag = true;
        checkbox.each(function(item){
            var parent = $(this).parents('.pt-h-item');
            if (!this.checked) {
                flag = false;
                parent.removeClass('active').css('background','#fff');
            }else{
                parent.addClass('active').css('background','#efefef');
            }
        })
        if (flag) {
            CheckAll.prop('checked', true);            
        }else{
            CheckAll.prop('checked', false);            
        }
    });

 欢迎大家评论，一起讨论。

欢迎大家关注我的 订阅号：博客乐园

转载于:https://www.cnblogs.com/6kou/p/zepto.html