jquery購物車結(jié)算功能實(shí)現(xiàn)方法
更新時(shí)間：2020年10月29日 15:15:01 作者：秋水易色
這篇文章主要為大家詳細(xì)介紹了jquery購物車結(jié)算功能的實(shí)現(xiàn)方法,購買多個(gè)商品進(jìn)行統(tǒng)一結(jié)算，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
先看看購物車結(jié)算效果：
具體代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>購物車結(jié)算</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>
<!-- 一個(gè)店鋪 -->
<div class="one-shop">
<!-- 一個(gè)商品 -->
<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>商品單價(jià)：￥<span class="shop-total-amount GoodsPrice">20.00</span></p>
</div>
<!-- 一個(gè)商品 -->
<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>商品單價(jià)：￥<span class="shop-total-amount GoodsPrice">9.90</span></p>
</div>
<!-- 一個(gè)商品 -->
<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>商品單價(jià)：￥<span class="shop-total-amount GoodsPrice">10.00</span></p>
</div>
<!-- 店鋪合計(jì) -->
<div class="shop-total">
<label for="">
<input type="checkbox" class="goods-check ShopCheck">店鋪全選 </label>
<p>本店合計(jì)：￥<span class="shop-total-amount ShopTotal">0</span></p>
</div>
</div>
<!-- 一個(gè)店鋪 -->
<div class="one-shop">
<!-- 一個(gè)商品 -->
<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>商品單價(jià)：￥<span class="shop-total-amount GoodsPrice">30.00</span></p>
</div>
<!-- 一個(gè)商品 -->
<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>商品單價(jià)：￥<span class="shop-total-amount GoodsPrice">20.00</span></p>
</div>
<!-- 店鋪合計(jì) -->
<div class="shop-total">
<label for="">
<input type="checkbox" class="goods-check ShopCheck">店鋪全選 </label>
<p>本店合計(jì)：￥<span class="shop-total-amount ShopTotal">0</span></p>
</div>
</div>
<!-- 總計(jì) -->
<div class="all-total">
<label for="">
<input type="checkbox" class="goods-check" id="AllCheck">全選 </label>
<p>總價(jià)合計(jì)：￥<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>
// 數(shù)量減
$(".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();
});
// 數(shù)量加
$(".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();
});
// 點(diǎn)擊商品按鈕
$(".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) { //如果店鋪被選中的數(shù)量等于所有店鋪的數(shù)量
$("#AllCheck").prop('checked', true); //全選按鈕被選中
TotalPrice();
} else {
$("#AllCheck").prop('checked', false); //else全選按鈕不被選中
TotalPrice();
}
} else { //如果選中的商品不等于所有商品
Shops.prop('checked', false); //店鋪全選按鈕不被選中
$("#AllCheck").prop('checked', false); //全選按鈕也不被選中
// 計(jì)算
TotalPrice();
// 計(jì)算
}
});
// 點(diǎn)擊店鋪按鈕
$(".ShopCheck").change(function() {
if ($(this).prop("checked") == true) { //如果店鋪按鈕被選中
$(this).parents(".one-shop").find(".goods-check").prop('checked', true); //店鋪內(nèi)的所有商品按鈕也被選中
if ($(".ShopCheck").length == $(".ShopCheck:checked").length) { //如果店鋪被選中的數(shù)量等于所有店鋪的數(shù)量
$("#AllCheck").prop('checked', true); //全選按鈕被選中
TotalPrice();
} else {
$("#AllCheck").prop('checked', false); //else全選按鈕不被選中
TotalPrice();
}
} else { //如果店鋪按鈕不被選中
$(this).parents(".one-shop").find(".goods-check").prop('checked', false); //店鋪內(nèi)的所有商品也不被全選
$("#AllCheck").prop('checked', false); //全選按鈕也不被選中
TotalPrice();
}
});
// 點(diǎn)擊全選按鈕
$("#AllCheck").click(function() {
if ($(this).prop("checked") == true) { //如果全選按鈕被選中
$(".goods-check").prop('checked', true); //所有按鈕都被選中
TotalPrice();
} else {
$(".goods-check").prop('checked', false); //else所有按鈕不全選
TotalPrice();
}
$(".ShopCheck").change(); //執(zhí)行店鋪全選的操作
});
function TotalPrice() {
var allprice = 0; //總價(jià)
$(".one-shop").each(function() { //循環(huán)每個(gè)店鋪
var oprice = 0; //店鋪總價(jià)
$(this).find(".GoodsCheck").each(function() { //循環(huán)店鋪里面的商品
if ($(this).is(":checked")) { //如果該商品被選中
var num = parseInt($(this).parents(".one-goods").find(".am-num-text").val()); //得到商品的數(shù)量
var price = parseFloat($(this).parents(".one-goods").find(".GoodsPrice").text()); //得到商品的單價(jià)
var total = price * num; //計(jì)算單個(gè)商品的總價(jià)
oprice += total; //計(jì)算該店鋪的總價(jià)
}
$(this).closest(".one-shop").find(".ShopTotal").text(oprice.toFixed(2)); //顯示被選中商品的店鋪總價(jià)
});
var oneprice = parseFloat($(this).find(".ShopTotal").text()); //得到每個(gè)店鋪的總價(jià)
allprice += oneprice; //計(jì)算所有店鋪的總價(jià)
});
$("#AllTotal").text(allprice.toFixed(2)); //輸出全部總價(jià)
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)購物車多物品數(shù)量的加減+總價(jià)計(jì)算
- jQuery實(shí)現(xiàn)加入購物車飛入動(dòng)畫效果
- JQuery實(shí)現(xiàn)的購物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
- jQuery實(shí)現(xiàn)購物車計(jì)算價(jià)格功能的方法
- 純jquery實(shí)現(xiàn)模仿淘寶購物車結(jié)算
- 基于JQuery實(shí)現(xiàn)的類似購物商城的購物車
- jQuery實(shí)現(xiàn)購物車數(shù)字加減效果
- jQuery+HTML5加入購物車代碼分享
- jquery實(shí)現(xiàn)購物車基本功能
- jQuery實(shí)現(xiàn)購物車
相關(guān)文章
jQuery插件zTree實(shí)現(xiàn)刪除樹節(jié)點(diǎn)的方法示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)刪除樹節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了jQuery樹插件zTree針對節(jié)點(diǎn)的遍歷與刪除操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery表單設(shè)置值的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)代碼雨特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
關(guān)于jQuery中fade(),show()起始位置的一點(diǎn)小發(fā)現(xiàn)
下面小編就為大家?guī)硪黄P(guān)于jQuery中fade(),show()起始位置的一點(diǎn)小發(fā)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
實(shí)例詳解jQuery表單驗(yàn)證插件validate
validate插件是一個(gè)基于jquery的表單驗(yàn)證插件了里面有許多的常用的一些驗(yàn)證方法我們可以直接調(diào)用，具體的我們一起來看看2016-01-01
跟著Jquery API學(xué)Jquery之一 選擇器
Jquery 選擇器是最基本的操作了，當(dāng)我們用原生的javascript的時(shí)候，我們?yōu)榱诉x擇一個(gè)對象不得不花費(fèi)九頭二虎之力2010-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery為某個(gè)div加入行樣式的相關(guān)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
jQuery實(shí)現(xiàn)精美的多級下拉菜單特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)精美的多級下拉菜單特效，主要依托于jQuery的fg.menu.js插件來實(shí)現(xiàn)的，效果非常棒，推薦給大家。2015-03-03
jQuery實(shí)現(xiàn)表格奇偶行顯示不同背景色 就這么簡單
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)表格奇偶行顯示不同背景色的方法，使表格更加美觀，便捷的查找同行數(shù)據(jù)更，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
模擬jQuery ajax服務(wù)器端與客戶端通信的代碼
本案例通過jQuery和Servlet技術(shù)來判斷用戶名是否存在，讓讀者明白jQuery是怎么調(diào)用服務(wù)器后臺的。還給出了解決中文亂碼的方案和如何避免各種瀏覽器的緩存。2011-03-03