JQ实现购物车全选跟总计全选-优快云博客

本文详细介绍了如何使用JavaScript和jQuery实现购物车中商品的全选功能，包括单个商品选择、店铺全选及整体全选的联动效果，通过监听checkBox状态变化来更新全选按钮的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//GoodsCheck购物车每个店铺的checkBox
//goods-check购物车所有的checkBox
//ShopCheck店铺全选的按钮
//commlistFrm店铺商品的模块
//allCheck 所有全选按钮

// 购物车全选
$('.ShopCheck').click(function () {

    if ($(this).prop("checked") == true) {
        $(this).parents('.commlistFrm').find(".GoodsCheck").prop('checked',true);
    }else{
        $(this).parents('.commlistFrm').find(".GoodsCheck").prop('checked',false);
    }
    shopAllcheck();
});


$('.GoodsCheck').click(function () {
    shopItemCheck(this);
    shopAllcheck();
});

function  shopAllcheck() {
    var item =$('.mui-content').children('.commlistFrm').find('.GoodsCheck').length;//获取购物车checkbox的数量
    var item_check = $('.mui-content').children('.commlistFrm').find('.GoodsCheck:checked').length;
    if(item ==item_check){
       $('.allCheck').prop('checked',true)
    }
    else {
        $('.allCheck').prop('checked',false)
    }
}

function shopItemCheck(t){
    var item =$(t).parents('.commlistFrm').find('.GoodsCheck').length;//获取购物车checkbox的数量
    var item_check = $(t).parents('.commlistFrm').find('.GoodsCheck:checked').length;
    if(item ==item_check){
        $(t).parents('.commlistFrm').find(".ShopCheck").prop('checked',true);
    }else{
        $(t).parents('.commlistFrm').find(".ShopCheck").prop('checked',false);
    }
}

// 结算全选
$('.allCheck').click(function () {
   if(this.checked==true){
   $('.goods-check').prop('checked',true);
   }
   else {
       $('.goods-check').prop('checked',false);
   }

});