欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2018年11月28日 12:44:40   作者:程程Godlike  
這篇文章主要介紹了jQuery實(shí)現(xiàn)購(gòu)物車的總價(jià)計(jì)算和總價(jià)傳值功能 ,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(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)文章

最新評(píng)論