首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

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

- Author -

秋水易色

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js 设置选中行的样式的实现代码
May 24 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
js为什么不能正确处理小数运算？
Dec 29 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析
Mar 02 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
sock(2) csgo(1) CAD(1) 404(1) Stater(1) protocol(1) XPathParser(1) mysqldump(1) xps(1) macos(1)
You might like
PHP防注入安全代码
2008/04/09 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
js对象基础实例分析
2015/01/13 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
2017/01/21 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python中实现对list做减法操作介绍
2015/01/09 Python
Python for Informatics 第11章之正则表达式（二）
2016/04/21 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
python滑块验证码的破解实现
2019/11/10 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
美国知名生活购物网站：Goop
2017/11/03 全球购物
迪梵英国官方网站：Darphin英国
2017/12/06 全球购物
HSRP的含义以及如何工作
2014/09/10 面试题
电气工程和自动化自荐信范文
2013/12/25 职场文书
端午节寄语2015
2015/03/23 职场文书
硕士论文致谢范文
2015/05/14 职场文书
国情备忘录观后感
2015/06/04 职场文书
法制教育观后感
2015/06/17 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
redis protocol通信协议及使用详解
2022/07/15 Redis