zoukankan      html  css  js  c++  java
  • 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);            
            }
        });
    

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

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

  • 相关阅读:
    chrome中打开 swf下载的问题
    爱对人比爱上人更重要
    ActiveMQ集群
    ActiveMQ相关API
    ActiveMQ持久化
    ActiveMQ处理模式
    ActiveMQ
    JMS与消息队列
    微服务设计、拆分原则
    web常用服务架构
  • 原文地址:https://www.cnblogs.com/6kou/p/zepto.html
Copyright © 2011-2022 走看看