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); } });
欢迎大家评论,一起讨论。
欢迎大家关注我的 订阅号:博客乐园