购物车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>

时间: 2024-10-11 16:50:03

购物车jquery数量加减+总价计算的相关文章

jQuery实现购物车多物品数量的加减+总价计算

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="textml; charset=utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <meta name="viewpo

购物车商品数量加减

<span class="cut ">-</span>                <input class="number" type="text" value="1">     <span class="add">+</span> <script>/*购物车商品数量加减*/$(function(){           $(&qu

自己动手丰衣足食之 jQuery 数量加减插件

引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些原理还不是很懂,比如说插件函数入口.插件内如何编写私有函数.如何调用含参私有函数.如果在使用插件时提示参数.都还需要一一去摸索. jQuery实现方式 1.类级别插件开发. $.ajax(). 2.对象级别插件开发.  $("div").highlight(). 3.jquery UI提供

jQuery实现购物车多物品数量的加减+总价+删除计算

<?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-e

jQuery实现购物车物品数量的加减

基于jquery的一款代码,实现购物车数据的加减,在淘宝网.京东商城购物时时经常见到的一个功能,点击文本框两侧的“+”与“-”,就可以增加或减少文本框内的数字值,每次步长为1,当然这个是可以自己设置的.本款效果除了加减功能外,还可以自动计算价格. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

jquery实现文本框数量加减功能的例子分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问

有同学在群里提问,如何使用axure制作商品数量增加减少效果,见GIF图.虽然属于初级教程,但很多同学还是小白新手阶段,所以特地录制了详细的视频讲解,供大家学习参考! 该教程由原型库网站录制http://www.yuanxingku.com转载请注明出处! 在axure中实现商品数量加减效果,原型库网站讲师-金乌 解答同学问,布布扣,bubuko.com

可定制的商品数量加减按钮

仿京东淘宝购物车商品的加减按钮,可定制程度较高,使用简单 支持自定义加/减按钮的标题内容.背景图片; 支持设置边框颜色; 支持使用键盘输入; 支持长按加/减按钮快速加减; 支持block回调与delegate(代理)回调. 支持使用xib创建.类方法创建.自定义大小 运行效果: 示例代码: 自定义加减按钮的标题悦德财富https://www.yuedecaifu.com 1 2 3 4 5 6 7 PPNumberButton *numberButton = [[PPNumberButton a

华为上机练习题--简单加减表达式计算

题目: 通过键盘输入100以内正整数的加.减运算式,请编写一个程序输出运算结果字符串. 输入字符串的格式为:"操作数1 运算符 操作数2","操作数"与"运算符"之间以一个空格隔开. 补充说明: 1.操作数为正整数,不需要考虑计算结果溢出的情况. 2.若输入算式格式错误,输出结果为"0". 要求实现函数: void arithmetic(const char *pInputStr, long lInputLen, char *