购物车的结算

Html

Css



    
    
        
            
         				 
        			
            
            
            
        
        商品单价：￥20.00
    



    
    
        
            
          
        
            
            
            
        
        商品单价：￥9.90
    
    
    
        
            
          
        
            
            
            
        
        商品单价：￥10.00
    
    
    
        
        店铺全选    
        本店合计：￥0
    



    
    
        
            
          
        
            
            
            
        
        商品单价：￥30.00
    
    
    
        
            
          
        
            
            
            
        
        商品单价：￥20.00
    
    
    
        
        店铺全选    
        本店合计：￥0
    



    
      全选    
    总价合计：￥0

.shop-total,.all-total {
	height:50px;
	line-height:50px;
	font-weight:bold;
	color:#f00;
	float:left;
}
.one-shop,.all-total,.shop-total {
	width:400px;
}
p {
	margin:0;
}
.goods-check {
	width:25px;
	height:25px;
	margin-top:5px;
}
.goods-msg,p,label {
	float:left;
}

$(document).ready(function() {

// 数量减
    $(".minus").click(function() {
        var t = $(this).parent().find('.am-num-text');
        t.val(parseInt(t.val()) - 1);
        if (t.val() <= 1) {
            t.val(1);
        }
        TotalPrice();
    });
    // 数量加
    $(".plus").click(function() {
        var t = $(this).parent().find('.am-num-text');
        t.val(parseInt(t.val()) + 1);
        if (t.val() <= 1) {
            t.val(1);
        }
        TotalPrice();
    });
    // 点击商品按钮
    $(".GoodsCheck").click(function() {
        var goods = $(this).closest(".one-shop").find(".GoodsCheck"); //获取本店铺的所有商品
        var goodsC = $(this).closest(".one-shop").find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品
        var Shops = $(this).closest(".one-shop").find(".ShopCheck"); //获取本店铺的全选按钮
        if (goods.length == goodsC.length) { //如果选中的商品等于所有商品
            Shops.prop('checked', true); //店铺全选按钮被选中
            if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量
                $("#AllCheck").attr('checked', true); //全选按钮被选中
                TotalPrice();
            } else {
                $("#AllCheck").prop('checked', false); //else全选按钮不被选中 
                TotalPrice();
            }
        } else { //如果选中的商品不等于所有商品
            Shops.prop('checked', false); //店铺全选按钮不被选中
            $("#AllCheck").prop('checked', false); //全选按钮也不被选中
            // 计算
            TotalPrice();
            // 计算
        }
    });
    // 点击店铺按钮
    $(".ShopCheck").click(function() {
        if ($(this).prop("checked") == true) { //如果店铺按钮被选中
            $(this).parents(".one-shop").find(".goods-check").prop('checked', true); //店铺内的所有商品按钮也被选中
            if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量
                $("#AllCheck").prop('checked', true); //全选按钮被选中
                TotalPrice();
            } else {
                $("#AllCheck").prop('checked', false); //else全选按钮不被选中
                TotalPrice();
            }
        } else { //如果店铺按钮不被选中
            $(this).parents(".one-shop").find(".goods-check").prop('checked', false); //店铺内的所有商品也不被全选
            $("#AllCheck").prop('checked', false); //全选按钮也不被选中
            TotalPrice();
        }
    });
    // 点击全选按钮
    $("#AllCheck").click(function() {
        if ($(this).prop("checked") == true) { //如果全选按钮被选中
            $(".goods-check").prop('checked', true); //所有按钮都被选中
            TotalPrice();
        } else {
            $(".goods-check").prop('checked', false); //else所有按钮不全选
            TotalPrice();
        }
        //				$(".ShopCheck").change(); //执行店铺全选的操作
    });

})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3

立即下载

购物车的结算



代码描述：购物车的结算有全选，多选，单选，总价，单价功能

这段代码很好的展示了购物车的全选，单选与结算模式

5

最新

发表评论全部评论

暂时没有评论！

杨小胖0

2017/4/21 15:04:33

这种bug自己加个判断不就可以了。。
回复

大宇0

2017/4/17 22:25:17

有个BUG，，输入负数，然后点√，

zhanghaitao0

2017/4/18 10:37:06

有BUG 怎么没有人整一下啊

figure_ai0

2017/4/20 12:00:35

代码在上面可以自己修改

Nicholas蚂蚁0

2017/6/12 18:13:08

自己整

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

执念

相关代码

购物车的结算

最新