jQuery實(shí)現(xiàn)購(gòu)物車的總價(jià)計(jì)算和總價(jià)傳值功能
效果圖:


代碼實(shí)現(xiàn):
1.多選框代碼:

2.結(jié)算價(jià)格代碼:

3. jQuery實(shí)現(xiàn)價(jià)格計(jì)算代碼: (當(dāng)點(diǎn)擊多選框時(shí),下面的總計(jì)金額會(huì)跟隨變化)
<#-- 計(jì)算總價(jià) S -->
<script>
$(function() {
// 加載完頁(yè)面時(shí),計(jì)算總計(jì)
showTotal();
$('.boxx').on('click', function () {
// 選擇多選框后,再重新計(jì)算
showTotal();
});
});
// 計(jì)算總計(jì)
function showTotal() {
var total = 0;
var number = 0;
// 1. 獲取所有的被勾選的條目復(fù)選框!循環(huán)遍歷
$(".boxx").each(function () {
var isChecked = $(this).prop("checked");
// 如果多選框被選中
if(isChecked == true) {
// 2. 獲取復(fù)選框的值,即其他元素的前綴
var id = $(this).val();
// alert("id" + id);
//3. 再通過前綴找到小計(jì)元素,獲取其文本
var text = $("#" + id + "Subtotal").text();
// alert(text);
//4. 累加計(jì)算
total += Number(text);
number += 1;
// alert(total);
}
});
// 5. 把總計(jì)顯示在總計(jì)元素上
$("#txts").text(number);//toFixed(2)函數(shù)的作用是把total保留2位
$("#totals").text(total.toFixed(2));//toFixed(2)函數(shù)的作用是把total保留2位
}
</script>
<#-- 計(jì)算總價(jià) E -->
4.當(dāng)點(diǎn)擊結(jié)算時(shí),使用jQuery傳值到后臺(tái)去進(jìn)行處理.
<#-- 結(jié)算 S -->
<script>
function jiesuan() {
// 1.獲取所有被選擇的條目的id,放到數(shù)組中
var cartItemIdArray = new Array();
$(".boxx").each(function () {
var isChecked = $(this).prop("checked");
// 如果多選框被選中
if(isChecked == true) {
cartItemIdArray.push($(this).val());//把復(fù)選框的值添加到數(shù)組中
}
});
// 2. 把數(shù)組的值toString(),然后賦給表單的cartItemIds這個(gè)hidden
$("#cartItemIds").val(cartItemIdArray.toString());
// 把總計(jì)的值,也保存到表單中
$("#hiddenTotal").val($("#totals").text());
// 3. 提交這個(gè)表單
$("#jieSuanForm").submit();
}
</script>
5. 第四步提交的隱藏域表單代碼如下:
<form id="jieSuanForm" action="pay" method="post"> <input type="hidden" name="cartItemIds" id="cartItemIds"/> <input type="hidden" name="total" id="hiddenTotal"/> <input type="hidden" name="shopcart" value="loadCartItems"/> </form>
6.這個(gè)過程并不復(fù)雜,之所以寫成一篇博客,是因?yàn)楸救藢?duì)DOM操作不是很熟悉,導(dǎo)致選取DOM元素時(shí)耽誤了一些時(shí)間,做一次筆記,為下次做類似的問題節(jié)約時(shí)間.
總結(jié)
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)購(gòu)物車的總價(jià)計(jì)算和總價(jià)傳值功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
jquery實(shí)現(xiàn)垂直手風(fēng)琴導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)垂直手風(fēng)琴導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02
JQuery 中幾個(gè)類選擇器的簡(jiǎn)單使用介紹
類選擇器想必很多喜歡jquery的朋友早早就涉及到了吧,它們的使用也應(yīng)該了如指掌了吧,接下來幫大家溫習(xí)下幾個(gè)簡(jiǎn)單類選擇器的使用方法,感興趣的你可以參考下哈,希望對(duì)你有所幫助2013-03-03
jQuery添加options點(diǎn)擊事件并傳值實(shí)例代碼
這篇文章主要介紹了jQuery添加options點(diǎn)擊事件并傳值實(shí)例代碼,非常具有參考價(jià)值,需要的朋友一起看下吧2016-05-05
jQuery進(jìn)行組件開發(fā)完整實(shí)例
這篇文章主要介紹了jQuery進(jìn)行組件開發(fā)的方法,以完整實(shí)例形式分析了基于jQuery實(shí)現(xiàn)自定義組件的相關(guān)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2015-12-12
基于jQuery模擬實(shí)現(xiàn)淘寶購(gòu)物車模塊
這篇文章主要介紹了如何利用jQuery+css+html模擬實(shí)現(xiàn)淘寶購(gòu)物車模塊,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起動(dòng)手嘗試一下2022-03-03
jquery插件之定時(shí)查詢待處理任務(wù)數(shù)量

