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);            
        }
    });

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

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

posted @ 2017-05-11 23:17  ukys  阅读(330)  评论(0编辑  收藏  举报