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 EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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 的异常处理程序
2014/06/22 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
详解如何让Express支持async/await
2017/10/09 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Django框架实现的分页demo示例
2019/05/25 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
iPython pylab模式启动方式
2020/04/24 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
酒店管理毕业生自荐信
2013/10/24 职场文书
环保口号大全
2014/06/12 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
敬老月活动总结
2014/08/28 职场文书
党性教育心得体会
2014/09/03 职场文书
金融保险专业求职信
2014/09/03 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
SQL Server内存机制浅探
2022/04/06 SQL Server
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技