jquery 实现购物车的商品总数及价格计算

jquery 实现购物车的价格计算和商品件数计算

html代码如下

<ul><li><input type="checkbox">商品一 单价 <span>100</span> <button>-</button><input type="text" value="1"> <button>+</button> 小计 : <span>100</span></li><li><input type="checkbox">商品二 单价 <span>150</span> <button>-</button><input type="text" value="1"> <button>+</button> 小计 : <span>150</span></li><li><input type="checkbox">商品三 单价 <span>200</span> <button>-</button><input type="text" value="1"> <button>+</button> 小计 : <span>200</span></li>
</ul>
<p>一共 <span id="count">0</span> 件商品，共计 <span id="countMoney">0</span> 元
</p>

js代码如下

<script src="jquery-3.4.1.js"></script>
<script>//点击减号$("li button:nth-of-type(1)").click(function () {//判断输入框输入框的值是否小于0if($(":text").attr("value")>0){$(this).next("input").attr("value",$(this).next("input").attr("value")-1)}else {$(this).next("input").attr("value",0)}$(this).next("input").next("button").next("span").html($(this).prev("span").html()*$(this).next("input").val())});//点击加号$("li button:nth-of-type(2)").click(function (){$(this).prev("input").attr("value",parseInt($(this).prev("input").attr("value"))+1);$(this).next("span").html($(this).prev("input").val()*$(this).prev("input").prev("button").prev("span").html());});//点击多选按钮$(":checkbox").click(function () {var n = 0;var m = 0;$.each($(":checkbox:checked"),function (index,item) {n += parseInt($(item).siblings("input").val());m += parseInt($($(item).siblings("span")[1]).html());});$("#count").html(n);$("#countMoney").html(m);})
</script>

下图所示：

jquery 实现购物车的商品总数及价格计算相关推荐

jquery清空购物车小案例
实现效果可实现功能数量增加.减少小计结算总商品数量.总价格计算移除购物车清空购物车代码 HTML结构: <div class="box"><div ...
利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节查看作业目录需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变当用户单击"+" ...
jQuery实现购物车计算价格统计功能
jQuery实现购物车计算价格统计功能 #功能介绍进入界面,刷新触发onload方法跳转到JS代码,可以对购物车内商品数量进行增加-减少,商品价格自动统计.当更改商品数量的输入框value值时,整个 ...
jquery mysql实现加入购物车_使用jQuery实现购物车结算功能
本文实例为大家分享了jQuery实现购物车结算功能展示的具体代码,供大家参考,具体内容如下 /*删除*/ $(function(){ $(".blue").bind("c ...
Android 中编写一个简易购物车，商品包括商品名称，单价，数量，可以对商品进行增删改查功能。（ArrayList，SQLite）
Android 中编写一个简易购物车,商品包括商品名称,单价,数量,可以对商品进行增删改查功能.(ArrayList,SQLite) 布局(activity_main.xml): <?xml v ...
html购物车总价,jQuery实现购物车的总价计算和总价传值功能
效果图: 代码实现: 1.多选框代码: 2.结算价格代码: 3. jQuery实现价格计算代码: (当点击多选框时,下面的总计金额会跟随变化) $(function() { // 加载完页面时,计算总 ...
ajax 实现总价刷新,jQuery实现购物车的总价计算和总价传值功能
效果图: 代码实现: 1.多选框代码: 2.结算价格代码: 3. jQuery实现价格计算代码: (当点击多选框时,下面的总计金额会跟随变化) $(function() { // 加载完页面时,计算总 ...
jQuery实现购物车的操作
jQuery实现购物车 #购物车操作步骤: 一.实现购物车的全选和全不选功能及背景的添加和删除二.实现数量模块的增加和减少三.实现输入值改变商品的小计四.用求和函数实现求和相加总价和总数量五. ...
购物车金额计算价格PHP,jQuery实现购物车计算价格功能的方法
本文实例讲述了jQuery实现购物车计算价格功能的方法.分享给大家供大家参考.具体如下: 目的实现在html界面修改购物车的件数,购物车商品价格的小计和总计要修改. 实现思路 1.当点击进入界面,刷 ...

jquery 实现购物车的商品总数及价格计算

jquery 实现购物车的商品总数及价格计算相关推荐

最新文章

热门文章