<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery购物车数量加减合计代码 - 站长素材</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<!-- <script type="text/javascript" src="js/js.js"></script> -->
<style type="text/css">
* {
font-size: 14px;
font-family: "寰�蒋闆呴粦";
vertical-align: middle;
margin: 0;
padding: 0;
}
img {
160px;
height: 120px;
}
/*span{display: inline-block;}*/
.imfor_top div {
height: 40px;
background-color: deepskyblue;
font-weight: bold;
}
.imfor div {
height: 140px;
line-height: 120px;
}
.imfor:hover {
background: RGB(238, 246, 255);
}
.check,
.check_top {
70px;
}
.pudc,
.pudc_top {
400px;
}
.pices,
.pices_top {
60px;
}
.totle {
color: red;
}
.num,
.num_top {
90px;
}
.num input {
40px;
}
.num span {
height: 23px;
17px;
border: 1px solid #e5e5e5;
background: #f0f0f0;
text-align: center;
line-height: 23px;
color: #444;
cursor: pointer;
}
.totle,
.totle_top {
60px;
}
.del,
.del_top {
60px;
cursor: pointer;
}
.imfor_top div,
.imfor div {
float: left;
border: 1px solid deepskyblue;
text-align: center;
}
.imfor_top,
.imfor {
800px;
}
.foot {
float: inherit;
}
#box,
#content_box {
800px;
margin: 0 auto;
}
.foot_add,
.foot_del {
float: left;
cursor: pointer;
margin-left: 10px;
margin-top: 14px;
}
.foot {
800px;
background-color: #eaeaea;
}
.foot_tol,
.foot_cash {
float: right;
cursor: pointer;
80px;
margin-top: 14px;
margin-left: 100px;
}
#susum {
color: red;
}
</style>
</head>
<body>clear:both;
<div id="box">
<div id="content_box">
<div class="imfor_top">
<div class="check_top">
<input type="checkbox" id="all" />全选
</div>
<div class="pudc_top">商品</div>
<div class="pices_top">单价</div>
<div class="num_top">数量</div>
<div class="totle_top">小计</div>
<div class="del_top">操作</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/1.jpg" /><span>Casio/卡西欧 EX-TR350</span></div>
<div class="pices">5999.8</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">5999.8</div>
<div class="del">删除</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/2.jpg" /><span>Canon/佳能 PowerShot SX50 HS</span></div>
<div class="pices"> 3888.5</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">3888.5</div>
<div class="del">删除</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/3.jpg" /><span>Sony/索尼 DSC-WX300</span></div>
<div class="pices">1428.5</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">1428.5</div>
<div class="del">删除</div>
</div>
<div class="imfor">
<div class="check">
<input type="checkbox" class="Each" />
</div>
<div class="pudc"><img src="img/4.jpg" /><span>Fujifilm/富士 instax mini 25</span></div>
<div class="pices">640.6</div>
<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>
<div class="totle">640.6</div>
<div class="del">删除</div>
</div>
</div>
<div class="foot">
<div class="foot_add">添加一行</div>
<div class="foot_del">全部删除</div>
<div class="foot_cash">结算</div>
<div class="foot_tol"><span>合计：￥</span><span id="susum">0</span></div>
</div>
</div>
<script type="text/javascript">
$(function() {
totl();
adddel()
//全选
$("#all").click(function() {
all = $(this).prop("checked")
$(".Each").each(function() {
$(this).prop("checked", all);
})
})
//删除当前行
$(".del").each(function() {
$(this).click(function() {
$(this).parent().remove();
if($(".imfor").length == 0) {
$("#susum").text(0);
}
totl();
})
})
//添加一行
$(".foot_add").click(function() {
var str = '<div class="imfor">' +
'<div class="check">' +
'<input type="checkbox" class="Each" />' +
'</div>' +
'<div class="pudc"><img src="img/5.jpg" /><span>Fujifilm/富士 instax mini 25</span></div>' +
'<div class="pices">640.6</div>' +
'<div class="num"><span class="reduc"> - </span><input type="text" value="1" /><span class="add"> +</span></div>' +
'<div class="totle">640.6</div>' +
'<div class="del">删除</div>' +
'</div>';
$(this).parent().prev().append(str);
totl();
adddel()
$(".del").each(function() {
$(this).click(function() {
$(this).parent().remove();
totl();
})
})
})
//全选删除
$(".foot_del").click(function() {
$(".Each").each(function() {
if($(this).prop('checked')) {
$(this).parents(".imfor").remove();
totl();
if($(".imfor").length == 0) {
$("#susum").text(0);
}
}
})
})
})
//合计
function totl() {
var sum = 0;
$(".totle").each(function() {
sum += parseFloat($(this).text());
$("#susum").text(sum);
})
}
function adddel(){
//小计和加减
//加
$(".add").each(function() {
$(this).click(function() {
var $multi = 0;
var vall = $(this).prev().val();
vall++;
$(this).prev().val(vall);
$multi = parseFloat(vall) * parseFloat($(this).parent().prev().text());
$(this).parent().next().text(Math.round($multi));
totl();
})
})
//减
$(".reduc").each(function() {
$(this).click(function() {
var $multi1 = 0;
var vall1 = $(this).next().val();
vall1--;
if(vall1 <= 0) {
vall1 = 1;
}
$(this).next().val(vall1);
$multi1 = parseFloat(vall1) * parseFloat($(this).parent().prev().text());
$(this).parent().next().text(Math.round($multi1));
totl();
})
})
}
</script>
</div>
</body>
</html>