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卸载全部事件的思路详解
Apr 03 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jQuery实现可以扩展的日历
Dec 01 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下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
PHP $_FILES函数详解
2011/03/09 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php中array_unshift()修改数组key注意事项分析
2016/05/16 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
python查询mysql,返回json的实例
2018/03/26 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python异步存储数据详解
2019/03/19 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
新电JAVA笔试题目
2014/08/31 面试题
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
铣工实训报告
2014/11/05 职场文书
运动会表扬稿
2015/01/16 职场文书
个人借条范本
2015/05/25 职场文书
新娘婚礼致辞
2015/07/27 职场文书