ajax 实现总价刷新,jQuery实现购物车的总价计算和总价传值功能
效果图:
代码实现:
1.多选框代码:
2.结算价格代码:
3. jQuery实现价格计算代码: (当点击多选框时,下面的总计金额会跟随变化)
$(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位
}
4.当点击结算时,使用jQuery传值到后台去进行处理.
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();
}
5. 第四步提交的隐藏域表单代码如下:
6.这个过程并不复杂,之所以写成一篇博客,是因为本人对DOM操作不是很熟悉,导致选取DOM元素时耽误了一些时间,做一次笔记,为下次做类似的问题节约时间.
总结
以上所述是小编给大家介绍的jQuery实现购物车的总价计算和总价传值功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
ajax 实现总价刷新,jQuery实现购物车的总价计算和总价传值功能相关推荐
- ajax自动局部刷新,jQuery如何实现AJAX定时刷新局部页面
jQuery如何实现AJAX定时刷新局部页面 发布时间:2021-06-25 09:47:48 来源:亿速云 阅读:75 作者:小新 这篇文章主要介绍了jQuery如何实现AJAX定时刷新局部页面,具 ...
- ajax实现滚动刷新,jquery如何实现滚动自动加载
前提:引入jquery文件. html 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 啊 css *{ margin: 0; paddin ...
- jQuery+php+ajax实现无刷新上传文件功能
2019独角兽企业重金招聘Python工程师标准>>> jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码: &l ...
- jQuery实现购物车多物品数量的加减+总价计算
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery+Ajax+PHP无刷新分页
代码需要在后台运行(包括页面index.html,ajax.php,connect.php,还有数据库food.sql) index.html <!DOCTYPE html> <ht ...
- html购物车总价,jQuery实现购物车的总价计算和总价传值功能
效果图: 代码实现: 1.多选框代码: 2.结算价格代码: 3. jQuery实现价格计算代码: (当点击多选框时,下面的总计金额会跟随变化) $(function() { // 加载完页面时,计算总 ...
- jQuery实现购物车物品数量的加减
代码: View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- ajax 页面无刷新
<!-- 使用原生Ajax 和 $.ajax 实现局部刷新的过程 --> <!-- 封装通用XMLHttpRequest对象 --> <!DOCTYPE html> ...
- php jquery 局部页面刷新,jQuery页面刷新(局部、全部)问题分析_jquery
本文实例分两部分对jquery刷新问题进行介绍,第一部分介绍了呢页面局部刷新:第二部分介绍了页面全部刷新 第一:页面局部刷新 jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法 ...
最新文章
- 融云发送自定义消息_数据源管理 | Kafka集群环境搭建,消息存储机制详解
- yum 报错:centos yum (28, 'Connection time-out') Trying other mirror.
- 在Centos中yum安装和卸载软件的使用方法
- 程序员如何避免半途而废?
- 【git】从零开始在git上部署自己的免费生日祝福网页
- FishC笔记—21 讲 函数:lambda表达式
- vue 动态引入组件
- macOS录制系统声音及麦克风的三种方法
- 史上最全的前端资源汇总(上)
- php 数字转换英文,PHP将英文数字转换为阿拉伯数字
- 如何编制试算平衡表_利用Excel制作总账表试算平衡表
- Qt5 多国语言设置
- ROS项目库依赖库 CMakeLists.txt中添加第三方库路径
- 2021美赛实用模板分享
- AVM环视系统算法框架
- 1.dom4j 解析xml
- 华为手机摄影从入门到精通_最全的华为手机摄影教程~最全的手机相机使用方法详解...
- 【财务学习笔记】ROE和ROI的比较
- CLAHE 算法学习 matlab
- JS: 重新组织 mongoDB数据库中的 数据格式的方法 / 导入导出 / 附案例代码