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. 再通過(guò)前綴找到小計(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è)過(guò)程并不復(fù)雜,之所以寫成一篇博客,是因?yàn)楸救藢?duì)DOM操作不是很熟悉,導(dǎo)致選取DOM元素時(shí)耽誤了一些時(shí)間,做一次筆記,為下次做類似的問(wèn)題節(jié)約時(shí)間.
總結(jié)
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)購(gòu)物車的總價(jià)計(jì)算和總價(jià)傳值功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JQuery EasyUI學(xué)習(xí)教程之datagrid 添加、修改、刪除操作
這篇文章主要介紹了JQuery EasyUI datagrid 添加、修改、刪除操作的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07jQuery實(shí)現(xiàn)的鼠標(biāo)滑過(guò)彈出放大圖片特效
最近項(xiàng)目遇到個(gè)需求,需要的效果是,鼠標(biāo)移到縮略圖上會(huì)顯示該圖的大圖,并且大圖跟隨鼠標(biāo)移動(dòng);或是移動(dòng)到提示文字上,也可以顯示圖片。經(jīng)過(guò)一番思索,用下面的方法實(shí)現(xiàn)了本效果,這里分享給大家。2016-01-01基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單
這篇文章主要介紹了基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單,代碼簡(jiǎn)單易懂,需要的朋友參考下2015-11-11jquery鼠標(biāo)滑過(guò)提示title具體實(shí)現(xiàn)代碼
這篇文章介紹了jquery鼠標(biāo)滑過(guò)提示title具體實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-08-08jQuery bxCarousel實(shí)現(xiàn)圖片滾動(dòng)切換效果示例代碼
BxCarousel可以指定顯示的元素總數(shù),可以指定每次滾動(dòng)的元素個(gè)數(shù),自動(dòng)播放模式,前一張/后一張按鈕控制圖片流動(dòng)2013-05-05JQuery的read函數(shù)與js的onload不同方式實(shí)現(xiàn)
JQuery的read函數(shù)與js的onload,想必大家對(duì)這兩個(gè)方法都有所熟悉吧,接下來(lái)介紹一個(gè)實(shí)例用以上兩種方法各自實(shí)現(xiàn),感興趣的你可不要錯(cuò)過(guò)了哈,希望可以幫助到你2013-03-03Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法
這篇文章主要介紹了Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05