jQuery實現(xiàn)購物車的總價計算和總價傳值功能
效果圖:
代碼實現(xiàn):
1.多選框代碼:
2.結算價格代碼:
3. jQuery實現(xiàn)價格計算代碼: (當點擊多選框時,下面的總計金額會跟隨變化)
<#-- 計算總價 S --> <script> $(function() { // 加載完頁面時,計算總計 showTotal(); $('.boxx').on('click', function () { // 選擇多選框后,再重新計算 showTotal(); }); }); // 計算總計 function showTotal() { var total = 0; var number = 0; // 1. 獲取所有的被勾選的條目復選框!循環(huán)遍歷 $(".boxx").each(function () { var isChecked = $(this).prop("checked"); // 如果多選框被選中 if(isChecked == true) { // 2. 獲取復選框的值,即其他元素的前綴 var id = $(this).val(); // alert("id" + id); //3. 再通過前綴找到小計元素,獲取其文本 var text = $("#" + id + "Subtotal").text(); // alert(text); //4. 累加計算 total += Number(text); number += 1; // alert(total); } }); // 5. 把總計顯示在總計元素上 $("#txts").text(number);//toFixed(2)函數的作用是把total保留2位 $("#totals").text(total.toFixed(2));//toFixed(2)函數的作用是把total保留2位 } </script> <#-- 計算總價 E -->
4.當點擊結算時,使用jQuery傳值到后臺去進行處理.
<#-- 結算 S --> <script> function jiesuan() { // 1.獲取所有被選擇的條目的id,放到數組中 var cartItemIdArray = new Array(); $(".boxx").each(function () { var isChecked = $(this).prop("checked"); // 如果多選框被選中 if(isChecked == true) { cartItemIdArray.push($(this).val());//把復選框的值添加到數組中 } }); // 2. 把數組的值toString(),然后賦給表單的cartItemIds這個hidden $("#cartItemIds").val(cartItemIdArray.toString()); // 把總計的值,也保存到表單中 $("#hiddenTotal").val($("#totals").text()); // 3. 提交這個表單 $("#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.這個過程并不復雜,之所以寫成一篇博客,是因為本人對DOM操作不是很熟悉,導致選取DOM元素時耽誤了一些時間,做一次筆記,為下次做類似的問題節(jié)約時間.
總結
以上所述是小編給大家介紹的jQuery實現(xiàn)購物車的總價計算和總價傳值功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
JQuery EasyUI學習教程之datagrid 添加、修改、刪除操作
這篇文章主要介紹了JQuery EasyUI datagrid 添加、修改、刪除操作的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07jQuery bxCarousel實現(xiàn)圖片滾動切換效果示例代碼
BxCarousel可以指定顯示的元素總數,可以指定每次滾動的元素個數,自動播放模式,前一張/后一張按鈕控制圖片流動2013-05-05JQuery的read函數與js的onload不同方式實現(xiàn)
JQuery的read函數與js的onload,想必大家對這兩個方法都有所熟悉吧,接下來介紹一個實例用以上兩種方法各自實現(xiàn),感興趣的你可不要錯過了哈,希望可以幫助到你2013-03-03Bootstrap table中toolbar新增條件查詢及refresh參數使用方法
這篇文章主要介紹了Bootstrap table中toolbar新增條件查詢及refresh參數使用方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05