码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-05-12 01:31:38      阅读:575      评论:0      收藏:0      [点我收藏+]

标签:bsp   checked   wap   二次开发   分享   cli   back   round   开发   

  在做手机端二次开发购物车的时候,发现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);            
        }
    });

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

标签:bsp   checked   wap   二次开发   分享   cli   back   round   开发   

原文地址:http://www.cnblogs.com/6kou/p/zepto.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!