购物车结算 删除 加1效果
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>购物车</title>
<link type="text/css" rel="stylesheet" href="css/module.css"/>
</head>
<body>
<div class="shopping">
<div class="shop-group-item">
<ul>
<li class="bb">
<div class="shop-info mm">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img">
<a href="#"><img src="images/03.jpg" /></a>
</div>
<div class="shop-info-text">
<h4>女子Plush Terry连帽运动T恤</h4>
<div class="shop-brief"><span>颜色：灰色 ；尺码：L </span><img src="images/icon.jpg" alt="" class="img1" /></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">699.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="reduce">-</a>
<span class="num">1</span>
<a href="javascript:;" class="add">+</a>
</div>
</div>
</div>
</div>
</li>
<li class="bb">
<div class="shop-info mm">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img">
<a href="#"><img src="images/06.jpg" /></a>
</div>
<div class="shop-info-text">
<h4>Storm Roll Trance背包-1261953</h4>
<div class="shop-brief"><span>均码</span><img src="images/icon.jpg" alt="" class="img1" /></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">499.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="reduce">-</a>
<span class="num">1</span>
<a href="javascript:;" class="add">+</a>
</div>
</div>
</div>
</div>
</li>
<li class="bb">
<div class="shop-info mm">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img">
<a href="#"><img src="images/08.jpg" /></a>
</div>
<div class="shop-info-text">
<h4>Renegade Twist运动帽</h4>
<div class="shop-brief"><span>均码</span><img src="images/icon.jpg" alt="" class="img1" /></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">219.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="reduce">-</a>
<span class="num">1</span>
<a href="javascript:;" class="add">+</a>
</div>
</div>
</div>
</div>
</li>
<li class="bb">
<div class="shop-info mm">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img">
<a href="#"><img src="images/03.jpg" /></a>
</div>
<div class="shop-info-text">
<h4>女子Plush Terry连帽运动T恤</h4>
<div class="shop-brief"><span>颜色：灰色 ；尺码：L </span><img src="images/icon.jpg" alt="" class="img1" /></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">699.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="reduce">-</a>
<span class="num">1</span>
<a href="javascript:;" class="add">+</a>
</div>
</div>
</div>
</div>
</li>
<li class="bb">
<div class="shop-info">
<input type="checkbox" class="check goods-check goodsCheck">
<div class="shop-info-img">
<a href="#"><img src="images/06.jpg" /></a>
</div>
<div class="shop-info-text">
<h4>Storm Roll Trance背包-1261953</h4>
<div class="shop-brief"><span>均码</span><img src="images/icon.jpg" alt="" class="img1" /></div>
<div class="shop-price">
<div class="shop-pices">￥<b class="price">499.00</b></div>
<div class="shop-arithmetic">
<a href="javascript:;" class="reduce">-</a>
<span class="num">1</span>
<a href="javascript:;" class="add">+</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="pay">
<div class="all-checkbox" style="color:#777;"><input type="checkbox" class="check goods-check" id="AllCheck">全选</div>
<a href="#" class="settlement">结算：<span class="total" id="AllTotal">￥0.00</span></a>
</div>
</body>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 数量加
$(".add").click(function() {
var t = $(this).parent().find('.num');
t.text(parseInt(t.text()) + 1);
if (t.text() <= 1) {
t.text(1);
}
TotalPrice();
});
// 数量减
$(".reduce").click(function() {
var t = $(this).parent().find('.num');
t.text(parseInt(t.text()) - 1);
if (t.text() <= 1) {
t.text(1);
}
TotalPrice();
});
// 删除
$('.img1').click(function(){
$(this).parent().parent().parent().remove();
TotalPrice();
})
//最左边按钮
$(".goodsCheck").click(function() {
var goods = $(this).closest(".shop-group-item").find(".goodsCheck");
var goodsC = $(this).closest(".shop-group-item").find(".goodsCheck:checked");
var Shops = $(this).closest(".shop-group-item").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);
TotalPrice();
}
} else {
Shops.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);
TotalPrice();
}
});
//计算
function TotalPrice() {
var allprice = 0;
$(".shop-group-item").each(function() {
var oprice = 0;
$(this).find(".goodsCheck").each(function() {
if ($(this).is(":checked")) {
var num = parseInt($(this).parents(".shop-info").find(".num").text());
var price = parseFloat($(this).parents(".shop-info").find(".price").text());
var total = price * num;
oprice += total;
}
$("#AllTotal").text(oprice.toFixed(2));
});
});
if($('.img1').length==0){
$("#AllTotal").text(0.00);
}
}
});
</script>
</html>
