当前位置: 首页 > news >正文

php中购物车结算代码,jquery购物车结算功能实现方法

具体代码:

购物车结算

.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;

}

-

+

商品单价:¥20.00

-

+

商品单价:¥9.90

-

+

商品单价:¥10.00

店铺全选

本店合计:¥0

-

+

商品单价:¥30.00

-

+

商品单价:¥20.00

店铺全选

本店合计:¥0

全选

总价合计:¥0

// 数量减

$(".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)); //输出全部总价

}

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

相关文章:

  • php.ini配置 耗时,配置PHP.INI监测服务器的脚本耗时
  • java自动生成测试与评估,jmeter如何自动生成测试报告
  • php memcached存储对象,从memcached获取对象并在PHP中设置为self
  • java阅读安卓,java – 如何在android中逐行阅读?
  • plotm matlab,MATLAB画地图的工具:worldmap和m_map
  • matlab不能盗版吗,matlab为了防止盗版,会不会篡改程序运行结果?这是明证
  • matlab 复权数据,〖Matlab〗基于通达信股价数据的复权处理(fantuanxiaot版本)
  • 微信小程序向php传递数据,微信小程序 跳转传递数据的方法
  • mysql8默认存储,MySQL 8.0安装
  • php berkeleydb,berkeleydb-5.1
  • matlab vs 打包exe文件路径,Matlab中調用VS編譯的exe文件並傳遞變量 的方法
  • php 访问受保护的属性,php – 我们应该直接访问受保护的属性还是使用getter?
  • PHP限制请求类型,Laravel :API 请求频率限制(Throttle中间件),自定义返回JSON类型,自定义时间...
  • oracle归档增长快,归档日志增长过快的问题
  • oracle 行转列 顺序,Oracle PIVOT 行转列的单行小计如何实现?
  • [NodeJS] 关于Buffer
  • 【刷算法】求1+2+3+...+n
  • angular2开源库收集
  • Angular6错误 Service: No provider for Renderer2
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • javascript数组去重/查找/插入/删除
  • RxJS 实现摩斯密码(Morse) 【内附脑图】
  • Terraform入门 - 1. 安装Terraform
  • windows下使用nginx调试简介
  • 短视频宝贝=慢?阿里巴巴工程师这样秒开短视频
  • 工作手记之html2canvas使用概述
  • 基于游标的分页接口实现
  • 记一次删除Git记录中的大文件的过程
  • 解析 Webpack中import、require、按需加载的执行过程
  • 线上 python http server profile 实践
  • 小李飞刀:SQL题目刷起来!
  • 写代码的正确姿势
  • 新版博客前端前瞻
  • 正则与JS中的正则
  • Android开发者必备:推荐一款助力开发的开源APP
  • Java总结 - String - 这篇请使劲喷我
  • ###C语言程序设计-----C语言学习(6)#
  • (LeetCode 49)Anagrams
  • (Matalb时序预测)WOA-BP鲸鱼算法优化BP神经网络的多维时序回归预测
  • (转)【Hibernate总结系列】使用举例
  • (转)3D模板阴影原理
  • .NET Remoting Basic(10)-创建不同宿主的客户端与服务器端
  • .net websocket 获取http登录的用户_如何解密浏览器的登录密码?获取浏览器内用户信息?...
  • .net快速开发框架源码分享
  • .NET上SQLite的连接
  • .net下的富文本编辑器FCKeditor的配置方法
  • .NET学习教程二——.net基础定义+VS常用设置
  • @ConditionalOnProperty注解使用说明
  • @hook扩展分析
  • @modelattribute注解用postman测试怎么传参_接口测试之问题挖掘
  • [20181219]script使用小技巧.txt
  • [C#]获取指定文件夹下的所有文件名(递归)
  • [C/C++]数据结构 堆的详解
  • [IT生活推荐]大家一起来玩游戏喽,来的都进!
  • [java]删除数组中的某一个元素