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


Posted in jQuery onNovember 28, 2018

效果图:

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

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

 代码实现:

1.多选框代码:

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

2.结算价格代码:

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

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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 #jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 #jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 #jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 #jQuery
You might like
php 注释规范
2012/03/29 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
PHP实现文件上传与下载
2020/08/28 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
Python解决八皇后问题示例
2018/04/22 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
在python3中实现更新界面
2020/02/21 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
PyCharm2020.1.2社区版安装,配置及使用教程详解(Windows)
2020/08/07 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
AJax面试题
2014/11/25 面试题
酒店销售主管岗位职责
2014/01/04 职场文书
五年级音乐教学反思
2014/02/06 职场文书
学校校庆演讲稿
2014/05/22 职场文书
导师就业推荐信范文
2014/05/22 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
质量整改报告范文
2014/11/08 职场文书
鲁迅故里导游词
2015/02/05 职场文书
上下班时间调整通知
2015/04/23 职场文书
干部考核工作总结2015
2015/07/24 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL