1. 程式人生 > >zepto全選按鈕之全選會根據按鈕是否被全部選中更改狀態

zepto全選按鈕之全選會根據按鈕是否被全部選中更改狀態

功能 color 後來 全不選 spa true zepto flag cti

  在做手機端二次開發購物車的時候,發現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全選按鈕之全選會根據按鈕是否被全部選中更改狀態