jQuery购物车数量加减合计代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery购物车数量加减合计代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery购物车数量加减合计代码</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>

</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" />Casio/卡西欧 EX-TR350</span>
			</div>
			<div class="pices">5999.8</div>
			<div class="num"><span class="reduc">&nbsp;-&nbsp;</span><input type="text" value="1" /><span class="add">&nbsp;+</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">&nbsp;-&nbsp;</span><input type="text" value="1" /><span class="add">&nbsp;+</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">&nbsp;-&nbsp;</span><input type="text" value="1" /><span class="add">&nbsp;+</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">&nbsp;-&nbsp;</span><input type="text" value="1" /><span class="add">&nbsp;+</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>
</body>
</html>

JS代码(js.js):

$(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">&nbsp;
	-&nbsp;
	</span><input type="text" value="1" /><span class="add">&nbsp;
	+</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();
}
)}
)}

CSS代码(style.css):

*{font-size:14px;font-family:"微软雅黑";vertical-align:middle;margin:0;padding:0;}
img{width: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{width:70px;}
.pudc,.pudc_top{width:400px;}
.pices,.pices_top{width:60px;}
.totle{color:red;}
.num,.num_top{width:90px;}
.num input{width:40px;}
.num span{height:23px;width:17px;border:1px solid #e5e5e5;background:#f0f0f0;text-align:center;line-height:23px;color:#444;cursor:pointer;}
.totle,.totle_top{width:60px;}
.del,.del_top{width:60px;cursor:pointer;}
.imfor_top div,.imfor div{float:left;border:1px solid deepskyblue;text-align:center;}
.imfor_top,.imfor{width:800px;}
.foot{float:inherit;}
#box,#content_box{width:800px;margin:0 auto;}
.foot_add,.foot_del{float:left;cursor:pointer;margin-left:10px;margin-top:14px;}
.foot{width:800px;background-color:#eaeaea;}
.foot_tol,.foot_cash{float:right;cursor:pointer;width:80px;margin-top:14px;margin-left:100px;}
#susum{color:red;}

附件:下载该文件资源,减少时间成本(增值服务)