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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery实现本地存储
Dec 22 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
国内咖啡文化
2021/03/03 咖啡文化
php 验证码制作(网树注释思想)
2009/07/20 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
pygame播放音乐的方法
2015/05/19 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
python如何运行js语句
2020/09/09 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
中学生期末评语
2014/02/03 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
总结Python常用的魔法方法
2021/05/25 Python