首页
所有分类
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 相关文章推荐
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 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
ICF-SW55(1) L4X25T(1) 飞利浦(2) PHILIPS(3) 德生9700DX(1) D1835(1) 德生PL330(2) 德劲1103(3) D1875(1) ICF-SW7600GR(1)
You might like
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
javascript 异常处理使用总结
2009/06/21 Javascript
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python二叉树遍历的实现方法
2013/11/21 Python
Django如何配置mysql数据库
2018/05/04 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
粉红色的鲸鱼：Vineyard Vines
2018/02/17 全球购物
大学生创业感言
2014/01/25 职场文书
施工质量承诺书范文
2014/05/30 职场文书
科技活动周标语
2014/10/08 职场文书
安全教育培训心得体会
2016/01/15 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
MySQL锁机制
2021/04/05 MySQL
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python