jQuery实现购物车的总价计算和总价传值功能

 更新时间:2018年11月28日 12:44:40   作者:程程Godlike  
这篇文章主要介绍了jQuery实现购物车的总价计算和总价传值功能 ,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

效果图:

 代码实现:

1.多选框代码:

2.结算价格代码:

3. jQuery实现价格计算代码: (当点击多选框时,下面的总计金额会跟随变化)

<#-- 计算总价 S -->
<script>
  $(function() {
    // 加载完页面时,计算总计
    showTotal();
    $('.boxx').on('click', function () {
      // 选择多选框后,再重新计算
      showTotal();
    });
  });
  // 计算总计
  function showTotal() {
    var total = 0;
    var number = 0;
    // 1. 获取所有的被勾选的条目复选框!循环遍历
    $(".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元素时耽误了一些时间,做一次笔记,为下次做类似的问题节约时间.

总结

以上所述是小编给大家介绍的jQuery实现购物车的总价计算和总价传值功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • jquery实现垂直手风琴导航栏

    jquery实现垂直手风琴导航栏

    这篇文章主要为大家详细介绍了jquery实现垂直手风琴导航栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • JQuery 中几个类选择器的简单使用介绍

    JQuery 中几个类选择器的简单使用介绍

    类选择器想必很多喜欢jquery的朋友早早就涉及到了吧,它们的使用也应该了如指掌了吧,接下来帮大家温习下几个简单类选择器的使用方法,感兴趣的你可以参考下哈,希望对你有所帮助
    2013-03-03
  • JQuery中的ready函数冲突的解决方法

    JQuery中的ready函数冲突的解决方法

    jQuery确实是一个提高前端开发效率的好框架(虽然很多大牛们都说它效率不咋地),但是用好它有时候并不容易,也许你也遇到过以下情况
    2010-05-05
  • jQuery添加options点击事件并传值实例代码

    jQuery添加options点击事件并传值实例代码

    这篇文章主要介绍了jQuery添加options点击事件并传值实例代码,非常具有参考价值,需要的朋友一起看下吧
    2016-05-05
  • JQuery中DOM事件冒泡实例分析

    JQuery中DOM事件冒泡实例分析

    这篇文章主要介绍了JQuery中DOM事件冒泡用法,实例分析了事件冒泡的原理与阻止冒泡的方法,需要的朋友可以参考下
    2015-06-06
  • jQuery进行组件开发完整实例

    jQuery进行组件开发完整实例

    这篇文章主要介绍了jQuery进行组件开发的方法,以完整实例形式分析了基于jQuery实现自定义组件的相关技巧,代码备有详尽的注释便于理解,需要的朋友可以参考下
    2015-12-12
  • 基于jQuery模拟实现淘宝购物车模块

    基于jQuery模拟实现淘宝购物车模块

    这篇文章主要介绍了如何利用jQuery+css+html模拟实现淘宝购物车模块,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起动手尝试一下
    2022-03-03
  • jQuery对象的链式操作用法分析

    jQuery对象的链式操作用法分析

    这篇文章主要介绍了jQuery对象的链式操作用法,结合实例形式分析了链式操作的原理、特点及相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • jquery插件之定时查询待处理任务数量

    jquery插件之定时查询待处理任务数量

    这篇文章主要介绍了jquery定时查询待处理任务数量插件示例
    2014-05-05
  • div模拟选择框示例代码

    div模拟选择框示例代码

    这次项目就有这个要求了,模拟选项框,我选择使用div+css+jquery来实现,总的来说还不错,感兴趣的朋友可以参考下
    2013-11-11

最新评论