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

前端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" οnclick="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' οnblur='amount_input(this,"9.9","100")' ><div class="btn-add oplus" οnclick="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" οnclick="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" οnclick="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();}
}

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

php如何实现购物时数量增减,1、vuex状态管理--购物车数量增减
GIF.gif 1.购物车数量增减 - + import { mapState,mapMutations} from 'vuex' //引入mapState.mapMutations映射函数 expo ...
axure中继器求和_如何利用Axure中继器，实现商品数量增减、价格总计效果
本文详细讲解:利用Axure中继器实现商品数量的增减,以及商品价格的总计的操作流程. 一般在做购物车.预算表中都会涉及到商品数量的增减,与商品价格的合计. 那么,我们怎么通过中继器来实现这个效果呢?本 ...
python商品总价_【Python基础 | 列表】小实验：实现显示商品，选择商品，将商品加入购物车，得到总价格...
B站学习<Python爬虫技术5天速成>时遇到的小作业,原视频点我题目如下: 代码如下: products = [["iPhone", 6888], ["M ...
【Python基础 | 列表】小实验：实现显示商品，选择商品，将商品加入购物车，得到总价格
B站学习<Python爬虫技术5天速成>时遇到的小作业,原视频点我题目如下: 代码如下: products = [["iPhone", 6888], ["M ...
js购物车功能php,实战项目：用原生JS实现一个购物车的功能
实战:购物车功能一.两个实用的数组函数 1.1 Array.every() every()方法传入回调函数,这个回调函数有三个参数,分别是: item:用于测试的当前值: index:当前测试值的索 ...
js购物车选中商品实现计算商品总价格
为了在激烈的互联网竞争中获得一席之地,都努力使自己的网站更为人性化.比如在购物网站一般都有这样的功能,那就是在结算商品的时候,网站可以自动计算要购买商品所需要花费的金钱数量. 代码实例如下: 01 0 ...
淘宝购物车计算总价格
最近闲着做一些效果练练手后续更新............. 欢迎评论,欢迎吐槽!!!! 效果图ˇˇˇˇˇˇˇˇˇˇˇˇˇ <!DOCTYPE html> <html> ...
android购物车简单实现全选+加减器+总价格
//Activity主頁面佈局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
微信小程序功能：全选和反选--修改商品数量、删除商品--计算总价格和总数量--收货地址
微信小程序–购物车页面(核心) 包含功能点: 全选和反选计算:总价格和总数量修改商品数量.删除商品收货地址结构:cart.wxml  <view c ...

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

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

最新文章

热门文章