js 购物车数量增减，总价格联动变化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tangtang5963/article/details/51283126

前端JS实现购物车功能，点击商品加减按钮商品数量加减，点击单选按钮和全选按钮颜色变化，总价联动变化。项目中应用的都是bootstrap的样式，css就不一一贴出来了。

加函数，减函数，手动修改数量判断库存函数，总价格计算函数，单选事件，全选事件，一共分为6个事件

<div class="orderwrap">
	<div class="ordertouch clearfix">
		<div class="ordercont">
			<div class="orderitem clearfix" priceOne>
				<div class="col-xs-1 clearPadding"></div>
				<div class="col-xs-3 clearPadding">
					<a href="">
						<img src="" alt="" class="img-responsive">
					</a>
				</div>
				<div class="col-xs-7 clearPadding pl10">
					<div class="proname"><a href="">原味手剥大瓜子</a></div>
					<div class="prodetail">
						<span class="font14 color-orange">￥<strong class="unitprice" unitprice>9.9</strong></span>
						<span class="pro_oriprice"><del>19.9</del></span>  
						<span class="color82 font12">库存：100</span>
					</div>
					<div class="pronum">
						<div class="pull-left input-group">
							<div class="num">数量：</div>
							<div class="btn-add omin" onclick="minus(this,'9.9','100');" style="padding:2px 8px;">
								<span class="glyphicon glyphicon-minus"></span>
							</div>
							<input type="text" class="btn-num onum" value="" name='count' onblur='amount_input(this,"9.9","100")' >
							<div class="btn-add oplus" onclick="plus(this,'9.9}','100}');" style="padding:2px 8px;">
								<span class="glyphicon glyphicon-plus"></span>
							</div>
						</div>		
					</div>			
				</div>
				<div class="col-xs-1 clearPadding"></div>
				<i class="iconfont o-label op-label checkitem" productid='}'></i>
				<a href=""><div class="o-more"></div></a>
			</div>
		</div>
		<div class="btn-del" onclick="btndel('',this)">删 除</div>
	</div>	
</div>
<div class="bottoms checkoutbox">
	<div class="col-xs-8  bordertop borderbottom">
		<div class="pull-left">
			<i class="o-label checkall iconfont" id="checkall"></i>
			<span class="qxposition">全选</span>
		</div>
		<div class="pull-right">
			<div class="">合计： ￥ <span class="font14 color-orange allprice" id="allprice">0</span></div>
			<div class="font12">不含运费</div>					
		</div>
	</div>
	<div class="col-xs-4 clearPadding"><button class="btn-checkout" onclick="sbm();">结算（<span class="allnum" id="amount">0</span>）</button></div>
</div>

//计算总价
function setTotal(){
	var allprice=0;//总价格
	var allnum=0;//总数量
	$(".checkitem").each(function(){
		if($(this).hasClass('oncheck')){
			var num=parseInt($(this).parents('[priceOne]').find('input[name=count]').val());//单个商品的购买数量
			var price=$(this).parents('[priceOne]').find('[unitprice]').text();//商品单价需要从后台获取
			allprice+=num*price;//每样商品的总价
			allnum+=num;
		}		
	})
	$(".allprice").html(allprice.toFixed(2));
	$(".allnum").html(allnum);
}
setTotal();

//手动修改文本框商品数量与库存的限制
function amount_input(tag,sellprice,stock){
	var amount=parseInt($(tag).val());
	if(isNaN(amount)){
		layer.msg('最少购买量为1');
		$(tag).val(1);
	}else{
		if(amount>stock){
			layer.msg('购买数量不能大于库存');
			$(tag).val(stock);
		}else if(amount<1){
			layer.msg('最少购买量为1');
			$(tag).val(1);
		}
	}
	var val=parseFloat(sellprice)*parseInt($(tag).val());
	setTotal();
}
// 全选
$('#checkall').click(function(){
	$(this).toggleClass('oncheck');
	if($(this).hasClass('oncheck')){
		$('.checkitem').addClass('oncheck');
		setTotal();
	}else{
		$('.checkitem').removeClass('oncheck');
		setTotal();
	}
});
//单选
$('.checkitem').click(function(){
	$(this).toggleClass('oncheck');
	var itemsleng=$('.checkitem').length;
	var checkedleng=$('[priceOne]').find('i').filter('.oncheck').length;
	if(checkedleng==itemsleng){
		$('.checkall').addClass('oncheck');
		setTotal();
	}else{
		$('.checkall').removeClass('oncheck');
		setTotal();
	}
});
// 购买数量加
function plus(tag,sellprice,stock){
	var _this=$(tag);
	var input=_this.prev('input');
	if(_this.prev('input[disabled]').length>0){
		return;
	}
	var amount=parseInt(input.val());
	amount++;
	if(amount>stock){
		return layer.msg('购买数量不能大于库存');
	}else{
		input.val(amount);
		setTotal();
	}
}
// 购买数量减
function minus(tag,sellprice,stock){
	var _this=$(tag);
	var input=_this.next('input');
	if(_this.next('input[disabled]').length>0){
		return;
	}
	var amount=parseInt(input.val());
	amount--;
	if(amount<=0){
		return layer.msg('购买数量不能小于1');
	}else{
		input.val(amount);
		setTotal();
	}
}