购物车

最新推荐文章于 2023-05-26 14:36:40 发布

MAYAO1206

最新推荐文章于 2023-05-26 14:36:40 发布

阅读量238

点赞数

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>

<div class="one-shop">

<div class="one-goods">
<div class="goods-msg">
<label for="">
<input type="checkbox" class="goods-check GoodsCheck">
</label>
<button type="button" class="minus">-</button>
<input type="text" class="am-num-text" value="1">
<button type="button" class="plus">+</button>
</div>
<p>商品单价：￥<span class="shop-total-amount GoodsPrice">20.00</span></p>
</div>

<div class="one-goods">
<div class="goods-msg">
<label for="">
<input type="checkbox" class="goods-check GoodsCheck">
</label>
<button type="button" class="minus">-</button>
<input type="text" class="am-num-text" value="1">
<button type="button" class="plus">+</button>
</div>
<p>商品单价：￥<span class="shop-total-amount GoodsPrice">9.90</span></p>
</div>

<div class="one-goods">
<div class="goods-msg ">
<label for="">
<input type="checkbox" class="goods-check GoodsCheck">
</label>
<button type="button" class="minus">-</button>
<input type="text" class="am-num-text" value="1">
<button type="button" class="plus">+</button>
</div>
<p>商品单价：￥<span class="shop-total-amount GoodsPrice">10.00</span></p>
</div>


<div class="shop-total">
<label for="">
<input type="checkbox" class="goods-check ShopCheck">店铺全选    </label>
<p>本店合计：￥<span class="shop-total-amount ShopTotal">0</span></p>
</div>
</div>


<div class="one-shop">

<div class="one-goods">
<div class="goods-msg">
<label for="">
<input type="checkbox" class="goods-check GoodsCheck">
</label>
<button type="button" class="minus">-</button>
<input type="text" class="am-num-text" value="1">
<button type="button" class="plus">+</button>
</div>
<p>商品单价：￥<span class="shop-total-amount GoodsPrice">30.00</span></p>
</div>

<div class="one-goods">
<div class="goods-msg">
<label for="">
<input type="checkbox" class="goods-check GoodsCheck">
</label>
<button type="button" class="minus">-</button>
<input type="text" class="am-num-text" value="1">
<button type="button" class="plus">+</button>
</div>
<p>商品单价：￥<span class="shop-total-amount GoodsPrice">20.00</span></p>
</div>

<div class="shop-total">
<label for="">
<input type="checkbox" class="goods-check ShopCheck">店铺全选    </label>
<p>本店合计：￥<span class="shop-total-amount ShopTotal">0</span></p>
</div>
</div>

<div class="all-total">
<label for="">
<input type="checkbox" class="goods-check" id="AllCheck">全选    </label>
<p>总价合计：￥<span class="shop-total-amount" id="AllTotal">0</span></p>
</div>

</body>

<script type="text/javascript">
$(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").prop('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).closest(".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).closest(".one-shop").find(".goods-check").prop('checked', false);
TotalPrice()
}
})

//点击全选按钮
$("#AllCheck").click(function(){
if($(this).prop("checked")==true){
$(".goods-check").prop({"checked":true});
TotalPrice()
}else{
$(".goods-check").prop('checked', false);
TotalPrice()
}
})

//总价
function TotalPrice(){
var allprice=0;//总价
$(".one-shop").each(function(){//循环每个店铺
var oprice=0;//店铺总价
$(this).find('.GoodsCheck').each(function(){ //循环店铺里面的商品
if($(this).is(":checked")){
console.log(1);
var num=parseInt($(this).parents(".one-goods").find(".am-num-text").val());
var price=parseFloat($(this).parents(".one-goods").find(".GoodsPrice").text());
var total=num*price;
oprice+=total;
}
$(this).closest(".one-shop").find(".ShopTotal").text(oprice.toFixed(2));
})

var oneprice = parseFloat($(this).find(".ShopTotal").text()); //得到每个店铺的总价
allprice += oneprice; //计算所有店铺的总价
})

$("#AllTotal").text(allprice.toFixed(2)); //输出全部总价
}

})
</script>

</html>