首页
所有分类
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 相关文章推荐
在标题栏显示新消息提示，很多公司项目中用到这个方法
Nov 04 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
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
内置函数(1) maven(2) V Rising(1) Tablespace(1) commit(1) 自定义函数(1) procedure(1) harbor(1) Navicat(1) GoFrame(3)
You might like
PHP 和 MySQL 基础教程（四）
2006/10/09 PHP
?算你??的 PHP 程式大小
2006/12/06 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
PHP yii实现model添加默认值的方法(两种方法)
2016/11/10 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python3.6的venv模块使用详解
2018/08/01 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
numpy.random模块用法总结
2019/05/27 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
python机器学习实现决策树
2019/11/11 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python定义类的简单用法
2020/07/24 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
泰国王权免税店官方网站：KingPower
2019/03/11 全球购物
Europcar比利时：租车
2019/08/26 全球购物
俄罗斯儿童和青少年服装、鞋子及配件的在线商店：Orby
2020/02/20 全球购物
博士研究生自我鉴定范文
2013/12/04 职场文书
个人收入证明范本
2014/01/12 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技