jquery购物车结算功能实现方法


Posted in Javascript onOctober 29, 2020

先看看购物车结算效果:

jquery购物车结算功能实现方法

具体代码:

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <title>购物车结算</title> 
 <meta name="description" content=""> 
 <meta name="keywords" content=""> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 
 <meta name="format-detection" content="telephone=no" /> 
 <meta name="renderer" content="webkit"> 
 <!--<![endif]--> 
 <meta name="apple-mobile-web-app-capable" content="yes"> 
 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
 <style> 
 .shop-total, 
 .all-total { 
 height: 50px; 
 line-height: 50px; 
 font-weight: bold; 
 color: #f00; 
 float: left; 
 } 
 
 .one-shop, 
 .all-total, 
 .shop-total { 
 width: 400px; 
 } 
 
 p { 
 margin: 0; 
 } 
 
 .goods-check { 
 width: 25px; 
 height: 25px; 
 margin-top: 5px; 
 } 
 
 .goods-msg, 
 p, 
 label { 
 float: left; 
 } 
 </style> 
</head> 
 
<body> 
 <!-- 一个店铺 --> 
 <div class="one-shop"> 
 <!-- 一个商品 --> 
 <div class="one-goods"> 
 <div class="goods-msg"> 
 <label for=""> 
  <input type="checkbox" class="goods-check GoodsCheck"> 
 </label> 
 <button type="button" class="minus">-</button> 
 <input type="text" class="am-num-text" value="1" /> 
 <button type="button" class="plus">+</button> 
 </div> 
 <p>商品单价:¥<span class="shop-total-amount GoodsPrice">20.00</span></p> 
 </div> 
 <!-- 一个商品 --> 
 <div class="one-goods"> 
 <div class="goods-msg"> 
 <label for=""> 
  <input type="checkbox" class="goods-check GoodsCheck"> 
 </label> 
 <button type="button" class="minus">-</button> 
 <input type="text" class="am-num-text" value="1" /> 
 <button type="button" class="plus">+</button> 
 </div> 
 <p>商品单价:¥<span class="shop-total-amount GoodsPrice">9.90</span></p> 
 </div> 
 <!-- 一个商品 --> 
 <div class="one-goods"> 
 <div class="goods-msg "> 
 <label for=""> 
  <input type="checkbox" class="goods-check GoodsCheck"> 
 </label> 
 <button type="button" class="minus">-</button> 
 <input type="text" class="am-num-text" value="1" /> 
 <button type="button" class="plus">+</button> 
 </div> 
 <p>商品单价:¥<span class="shop-total-amount GoodsPrice">10.00</span></p> 
 </div> 
 <!-- 店铺合计 --> 
 <div class="shop-total"> 
 <label for=""> 
 <input type="checkbox" class="goods-check ShopCheck">店铺全选 </label> 
 <p>本店合计:¥<span class="shop-total-amount ShopTotal">0</span></p> 
 </div> 
 </div> 
 <!-- 一个店铺 --> 
 <div class="one-shop"> 
 <!-- 一个商品 --> 
 <div class="one-goods"> 
 <div class="goods-msg"> 
 <label for=""> 
  <input type="checkbox" class="goods-check GoodsCheck"> 
 </label> 
 <button type="button" class="minus">-</button> 
 <input type="text" class="am-num-text" value="1" /> 
 <button type="button" class="plus">+</button> 
 </div> 
 <p>商品单价:¥<span class="shop-total-amount GoodsPrice">30.00</span></p> 
 </div> 
 <!-- 一个商品 --> 
 <div class="one-goods"> 
 <div class="goods-msg"> 
 <label for=""> 
  <input type="checkbox" class="goods-check GoodsCheck"> 
 </label> 
 <button type="button" class="minus">-</button> 
 <input type="text" class="am-num-text" value="1" /> 
 <button type="button" class="plus">+</button> 
 </div> 
 <p>商品单价:¥<span class="shop-total-amount GoodsPrice">20.00</span></p> 
 </div> 
 <!-- 店铺合计 --> 
 <div class="shop-total"> 
 <label for=""> 
 <input type="checkbox" class="goods-check ShopCheck">店铺全选 </label> 
 <p>本店合计:¥<span class="shop-total-amount ShopTotal">0</span></p> 
 </div> 
 </div> 
 <!-- 总计 --> 
 <div class="all-total"> 
 <label for=""> 
 <input type="checkbox" class="goods-check" id="AllCheck">全选 </label> 
 <p>总价合计:¥<span class="shop-total-amount" id="AllTotal">0</span></p> 
 </div> 
 <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script> 
 <script> 
 // 数量减 
 $(".minus").click(function() { 
 var t = $(this).parent().find('.am-num-text'); 
 t.val(parseInt(t.val()) - 1); 
 if (t.val() <= 1) { 
 t.val(1); 
 } 
 TotalPrice(); 
 }); 
 // 数量加 
 $(".plus").click(function() { 
 var t = $(this).parent().find('.am-num-text'); 
 t.val(parseInt(t.val()) + 1); 
 if (t.val() <= 1) { 
 t.val(1); 
 } 
 TotalPrice(); 
 }); 
 // 点击商品按钮 
 $(".GoodsCheck").click(function() { 
 var goods = $(this).closest(".one-shop").find(".GoodsCheck"); //获取本店铺的所有商品 
 var goodsC = $(this).closest(".one-shop").find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品 
 var Shops = $(this).closest(".one-shop").find(".ShopCheck"); //获取本店铺的全选按钮 
 if (goods.length == goodsC.length) { //如果选中的商品等于所有商品 
 Shops.prop('checked', true); //店铺全选按钮被选中 
 if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量 
 $("#AllCheck").prop('checked', true); //全选按钮被选中 
 TotalPrice(); 
 } else { 
 $("#AllCheck").prop('checked', false); //else全选按钮不被选中 
 TotalPrice(); 
 } 
 } else { //如果选中的商品不等于所有商品 
 Shops.prop('checked', false); //店铺全选按钮不被选中 
 $("#AllCheck").prop('checked', false); //全选按钮也不被选中 
 // 计算 
 TotalPrice(); 
 // 计算 
 } 
 }); 
 // 点击店铺按钮 
 $(".ShopCheck").change(function() { 
 if ($(this).prop("checked") == true) { //如果店铺按钮被选中 
 $(this).parents(".one-shop").find(".goods-check").prop('checked', true); //店铺内的所有商品按钮也被选中 
 if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量 
 $("#AllCheck").prop('checked', true); //全选按钮被选中 
 TotalPrice(); 
 } else { 
 $("#AllCheck").prop('checked', false); //else全选按钮不被选中 
 TotalPrice(); 
 } 
 } else { //如果店铺按钮不被选中 
 $(this).parents(".one-shop").find(".goods-check").prop('checked', false); //店铺内的所有商品也不被全选 
 $("#AllCheck").prop('checked', false); //全选按钮也不被选中 
 TotalPrice(); 
 } 
 }); 
 // 点击全选按钮 
 $("#AllCheck").click(function() { 
 if ($(this).prop("checked") == true) { //如果全选按钮被选中 
 $(".goods-check").prop('checked', true); //所有按钮都被选中 
 TotalPrice(); 
 } else { 
 $(".goods-check").prop('checked', false); //else所有按钮不全选 
 TotalPrice(); 
 } 
 $(".ShopCheck").change(); //执行店铺全选的操作 
 }); 
 
 function TotalPrice() { 
 var allprice = 0; //总价 
 $(".one-shop").each(function() { //循环每个店铺 
 var oprice = 0; //店铺总价 
 $(this).find(".GoodsCheck").each(function() { //循环店铺里面的商品 
 if ($(this).is(":checked")) { //如果该商品被选中 
  var num = parseInt($(this).parents(".one-goods").find(".am-num-text").val()); //得到商品的数量 
  var price = parseFloat($(this).parents(".one-goods").find(".GoodsPrice").text()); //得到商品的单价 
  var total = price * num; //计算单个商品的总价 
  oprice += total; //计算该店铺的总价 
 } 
 $(this).closest(".one-shop").find(".ShopTotal").text(oprice.toFixed(2)); //显示被选中商品的店铺总价 
 }); 
 var oneprice = parseFloat($(this).find(".ShopTotal").text()); //得到每个店铺的总价 
 allprice += oneprice; //计算所有店铺的总价 
 }); 
 $("#AllTotal").text(allprice.toFixed(2)); //输出全部总价 
 } 
 </script> 
</body> 
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 判断undefined的实现代码
Nov 26 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
JsonProperty 的使用方法详解
Oct 11 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
js实现星星海特效的示例
Sep 28 Javascript
JavaScript微信定位功能实现方法
Nov 29 #Javascript
jQuery中的select操作详解
Nov 29 #Javascript
微信小程序加载更多 点击查看更多
Nov 29 #Javascript
AngularJs表单验证实例代码解析
Nov 29 #Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 #Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 #Javascript
JavaScript获取服务器端时间的方法
Nov 29 #Javascript
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Django静态文件加载失败解决方案
2020/08/26 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
优秀员工自荐书
2013/12/19 职场文书
大学生就业策划书范文
2014/04/04 职场文书
《长相思》听课反思
2014/04/10 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏