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)容，希望對(duì)大家的學(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中$this和$(this)的區(qū)別介紹（一看就懂）
這篇文章主要介紹了jQuery中$this和$(this)的區(qū)別介紹（一看就懂）,本文用簡潔的語言講解了它們之間的區(qū)別,并給出了一個(gè)例子來說明,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
本篇文章主要是對(duì)jquery某一元素重復(fù)綁定的問題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
淺談Jquery中Ajax異步請(qǐng)求中的async參數(shù)的作用
下面小編就為大家?guī)硪黄獪\談Jquery中Ajax異步請(qǐng)求中的async參數(shù)的作用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
文件上傳是網(wǎng)站很常見的功能之一，通過使用 jQuery 可以讓上傳過程更加人性化，更好的用戶體驗(yàn)。本文介紹20個(gè)jQuery的文件上傳插件，其中有一些是教程。2011-09-09
Jquery+ajax+JAVA(servlet)實(shí)現(xiàn)下拉菜單異步取值
這篇文章主要介紹了Jquery+ajax+JAVA(servlet)實(shí)現(xiàn)下拉菜單異步取值的相關(guān)資料,需要的朋友可以參考下2016-03-03
jQuery實(shí)現(xiàn)點(diǎn)擊該行即可刪除HTML表格行
本節(jié)任務(wù)是從一個(gè)HTML表使用一些時(shí)髦的效果，只要按一下該行的行。以下是實(shí)現(xiàn)這一目標(biāo)的jQuery代碼2014-10-10
jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法詳解
這篇文章主要介紹了jQuery遍歷DOM節(jié)點(diǎn)操作之filter()方法,結(jié)合實(shí)例形式詳細(xì)分析了filter的功能及4種具體用法,需要的朋友可以參考下2016-04-04
今天小編就為大家分享一篇關(guān)于jquery的$().each和$.each的區(qū)別，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
jQuery 添加/移除CSS類實(shí)現(xiàn)代碼
在網(wǎng)頁設(shè)計(jì)中，我們常常要使用Javascript來改變頁面元素的樣式。2010-02-02