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

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

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

  • 相关阅读:
    计算机网络第一章_20210512
    bootloader_华清远见
    C#3.17
    linux--cd命令
    国内的开源网站
    安装linux
    如何自我介绍
    课堂破冰游戏“猜猜他是谁”
    办公软件---word
    计算机网络--技能训练
  • 原文地址:https://www.cnblogs.com/6kou/p/zepto.html
Copyright © 2011-2022 走看看