原创投稿
  1. 创想鸟首页
  2. 用户投稿

使用 jQuery 实现动态输入项的价格与数量合计计算教程

程序猿 • • 用户投稿

使用 jquery 实现动态输入项的价格与数量合计计算教程

本文详细介绍了如何利用 jQuery 在动态生成的表单输入字段中，实时计算商品价格与数量的总和。通过监听数量和价格输入框的变化事件，遍历所有商品项，获取其对应的价格和数量，并累加计算出订单总价，从而解决动态数据输入场景下的合计计算难题，提供了一套高效的前端解决方案。

1. 理解动态订单系统的挑战

在构建如在线点餐系统这类应用时，用户可能需要动态添加多个商品项到订单中。每个商品项通常包含商品名称、单价和购买数量。核心挑战在于如何实时计算所有商品的总价，特别是当商品项可以动态增删时。传统的静态表单处理方式难以应对这种需求，需要借助前端技术（如 jQuery）来实现动态监听和计算。

2. 现有 HTML 与 PHP 结构分析

为了实现动态订单功能，我们需要一个清晰的 HTML 结构来表示每个商品项，以及后端 PHP 脚本来获取商品价格。

2.1 HTML 结构

每个商品项通常包含以下关键输入字段：

商品选择 (): 用户选择具体的商品。价格 (): 根据商品选择自动填充的单价，通常为只读。数量 (): 用户输入购买的数量。

示例 HTML 结构如下：

        
        
            
                
تفاصيل الطلب
            
            
                 
                                        
                                                    اختر الصنف

关键点：

每个商品行被包裹在一个具有特定类（如 body getval）的 div 中，这便于我们使用 jQuery 遍历每个商品项。价格输入框和数量输入框都带有公共类（price 和 quantity），这对于批量选择和操作至关重要。总价输入框 total 独立存在，用于显示计算结果。name=”itemname[]”, name=”price[]”, name=”quantity[]” 的数组命名方式，便于后端 PHP 接收多个商品项的数据。

2.2 PHP 后端获取价格

PHP 脚本负责根据选定的商品名称从数据库中获取对应的价格。

prepare("SELECT * FROM all_menu WHERE `item_name` = '".$id."'");        $get_c->execute();         while ($row = $get_c->fetch()) {            $code .= $row['price'];        }        echo $code.'.00'; // 输出价格    }?>

此 PHP 脚本通过 AJAX 请求接收商品名称 (code)，查询数据库并返回对应的价格。

3. 核心解决方案：实时合计计算

实现动态合计计算的关键在于：

事件监听： 监听商品选择框和数量输入框的变化。动态添加行： 确保新添加的行也能被正确监听。遍历计算： 当任何相关输入变化时，遍历所有商品行，计算每个商品的总价，并累加到总订单价。

3.1 事件监听与委托

由于商品行是动态添加的，直接使用 .change() 绑定事件会漏掉新添加的元素。最佳实践是使用 事件委托。通过将事件监听器附加到文档（或一个静态的父元素）上，我们可以捕获来自动态元素的事件。

我们将监听两种变化：

商品选择变化： 当用户选择不同的商品时，需要通过 AJAX 获取新价格，并随后重新计算总价。数量变化： 当用户修改商品数量时，需要立即重新计算总价。

3.2 遍历与计算逻辑

核心的计算逻辑封装在一个函数 calculateTotal() 中。该函数会：

初始化一个总金额变量 totalSum 为 0。遍历页面上所有具有 body getval 类的 div 元素（每个代表一个商品行）。在每个商品行内部，找到对应的价格 (.price) 和数量 (.quantity) 输入框。将获取到的值转换为浮点数（parseFloat），进行价格与数量的乘法运算。将每个商品的总价累加到 totalSum 中。将最终的 totalSum 更新到总价输入框 (#total) 中。

function calculateTotal() {    let totalSum = 0.0;    // 遍历所有具有 'body getval' 类的商品行容器    $('.body.getval').each(function() {        let $rowContainer = $(this); // 当前商品行容器        // 获取价格，如果为空或无效则默认为0        let price = parseFloat($rowContainer.find('.price').val() || 0);        // 获取数量，如果为空或无效则默认为0        let quantity = parseFloat($rowContainer.find('.quantity').val() || 0);        // 确保价格和数量都是有效的数字，然后进行乘法运算        if (!isNaN(price) && !isNaN(quantity)) {            totalSum += price * quantity;        }    });    // 更新总价输入框，并格式化为两位小数    $('#total').val(totalSum.toFixed(2));}

3.3 整合后的 jQuery 代码示例

将上述逻辑整合到完整的 jQuery 代码中，包括动态添加行和事件委托。

  $(document).ready(function(){    var nextRowID = 0; // 用于为新行生成唯一ID    // 1. 事件委托：监听所有（包括动态添加的）商品选择框的变化    $(document).on('change', '[name="itemname[]"]', function(){        var $currentItemSelect = $(this);        var code = $currentItemSelect.val();        // 找到当前行中的价格输入框        var $priceInput = $currentItemSelect.closest('.body.getval').find('.price');        // AJAX 请求获取商品价格        $.ajax({            type: 'POST',            url: 'pages/GetPrice.php', // 你的PHP文件路径            data:{code:code},            success: function(data){                $priceInput.val(data); // 更新价格                calculateTotal(); // 价格更新后重新计算总价            },            error: function (jqXHR, textStatus, errorThrown){                alert("获取价格失败: " + errorThrown);            }        });    });    // 2. 事件委托：监听所有（包括动态添加的）数量输入框的变化    $(document).on('change', '.quantity', function(){        calculateTotal(); // 数量变化后重新计算总价    });    // 3. 核心计算函数：遍历所有商品行并计算总价    function calculateTotal() {        let totalSum = 0.0;        // 遍历所有具有 'body getval' 类的商品行容器        $('.body.getval').each(function() {            let $rowContainer = $(this); // 当前商品行容器            // 获取价格，如果为空或无效则默认为0            let price = parseFloat($rowContainer.find('.price').val() || 0);            // 获取数量，如果为空或无效则默认为0            let quantity = parseFloat($rowContainer.find('.quantity').val() || 0);            // 确保价格和数量都是有效的数字，然后进行乘法运算            if (!isNaN(price) && !isNaN(quantity)) {                totalSum += price * quantity;            }        });        // 更新总价输入框，并格式化为两位小数        $('#total').val(totalSum.toFixed(2));    }    // 4. 动态添加新行功能    $('#add').click(function(e){        e.preventDefault();        var id = ++nextRowID;        // 注意：这里生成的HTML片段应与初始HTML结构保持一致        // 并且ID需要是唯一的，例如 'itemname'+id，但更推荐通过类名和DOM遍历来定位元素        $('#append').append(            '
' +                '' +                '
' + // 确保ID唯一                    '
' +

以上就是使用 jQuery 实现动态输入项的价格与数量合计计算教程的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1263979.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
如何使用 jQuery 实现动态输入项的商品价格与数量总计
上一篇 2025年12月10日 08:05:42
动态输入场景下基于 jQuery 的实时价格与数量计算教程
下一篇 2025年12月10日 08:05:48

相关推荐

  • 联想城市超级智能体荣获”2025数字政府创新解决方案”奖 引领智慧城市4.0新时代

    联想城市超级智能体荣获”2025数字政府创新解决方案”奖 引领智慧城市4.0新时代联想城市超级智能体荣获”2025数字政府创新解决方案”奖 引领智慧城市4.0新时代联想城市超级智能体荣获”2025数字政府创新解决方案”奖 引领智慧城市4.0新时代联想城市超级智能体荣获”2025数字政府创新解决方案”奖 引领智慧城市4.0新时代

    9月25日，由中国互联网协会主办的“2025数字政府智能应用与创新发展大会”隆重召开。联想城市超级智能体凭借其领先的技术架构和广泛的实践成果，荣获“2025数字政府创新解决方案”大奖，成为推动数字政府建设的典范案例。 权威认证加持，“联想方案”引领全球智慧城市建设风向 本届大会以“数智驱动 政务创新…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    000

  • 联想小新平板Pro GT配置公布：搭载第三代骁龙8旗舰SOC

    联想小新平板Pro GT配置公布：搭载第三代骁龙8旗舰SOC联想小新平板Pro GT配置公布：搭载第三代骁龙8旗舰SOC联想小新平板Pro GT配置公布：搭载第三代骁龙8旗舰SOC联想小新平板Pro GT配置公布：搭载第三代骁龙8旗舰SOC

    凤凰网科技讯 7月8日，联想小新官方发布消息，公布了小新平板 pro gt 的部分配置信息。这款新品确认将搭载第三代骁龙8旗舰soc，并配备一块11.1英寸的3.2k高刷lcd屏幕。 小新平板Pro GT被定义为“轻旗舰 实力派”，其机身重量约为458g，厚度约为5.99mm。 ☞☞☞AI 智能聊天…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • cpu排行榜2025 2025电脑cpu性能处理器前十名最新排名

    cpu排行榜2025 2025电脑cpu性能处理器前十名最新排名cpu排行榜2025 2025电脑cpu性能处理器前十名最新排名cpu排行榜2025 2025电脑cpu性能处理器前十名最新排名cpu排行榜2025 2025电脑cpu性能处理器前十名最新排名

    最佳处理器选择依据需求：1. 游戏玩家选AMD Ryzen 7 9800X3D或Ryzen 9 9950X3D；2. 内容创作者选Intel Core i9-14900K或AMD Ryzen 9 9950X；3. 多任务用户选AMD Ryzen 9 7950X3D或Intel Core Ultra …

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    300

  • sublime怎么高亮显示匹配的括号_Sublime括号匹配高亮功能设置

    sublime怎么高亮显示匹配的括号_Sublime括号匹配高亮功能设置sublime怎么高亮显示匹配的括号_Sublime括号匹配高亮功能设置sublime怎么高亮显示匹配的括号_Sublime括号匹配高亮功能设置sublime怎么高亮显示匹配的括号_Sublime括号匹配高亮功能设置

    Sublime Text默认支持括号匹配高亮，需确认设置中启用”match_brackets”及相关选项，建议安装BracketHighlighter插件增强功能，并检查主题颜色是否影响显示效果。 Sublime Text 默认就支持括号匹配高亮，当你将光标放在一个括号（如 …

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    300

  • 使用Spring Boot构建JSON格式的算术操作POST API教程

    使用Spring Boot构建JSON格式的算术操作POST API教程使用Spring Boot构建JSON格式的算术操作POST API教程使用Spring Boot构建JSON格式的算术操作POST API教程使用Spring Boot构建JSON格式的算术操作POST API教程

    本教程将指导您如何使用Spring Boot框架创建一个接收JSON格式请求的POST API端点。该API能够根据请求中的操作类型（加、减、乘）对两个整数执行算术运算，并返回包含操作结果和指定用户名的JSON响应。文章将详细介绍如何定义数据传输对象（DTOs）、枚举类型、实现业务逻辑服务以及构建R…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • 豆包AI怎么转换语言 豆包AI语言转换方法

    豆包AI怎么转换语言 豆包AI语言转换方法豆包AI怎么转换语言 豆包AI语言转换方法豆包AI怎么转换语言 豆包AI语言转换方法豆包AI怎么转换语言 豆包AI语言转换方法

    豆包ai切换界面语言及指定回复语言的方法如下：1. 打开豆包app或网页版，进入“设置” → “通用设置” → “语言”，选择所需语言保存即可切换界面语言；2. 提问时明确说明所需回复语言，如“请用英文回答”，或使用提示词“[en]”、“[fr]”等，ai将按要求输出对应语言。界面语言更改不影响ai…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • cpu天梯图最新排名2025 手机cpu处理器排行榜天梯图top10

    cpu天梯图最新排名2025 手机cpu处理器排行榜天梯图top10cpu天梯图最新排名2025 手机cpu处理器排行榜天梯图top10cpu天梯图最新排名2025 手机cpu处理器排行榜天梯图top10cpu天梯图最新排名2025 手机cpu处理器排行榜天梯图top10

    骁龙 8 Gen4、天玑 9400、A18 Pro 和 Exynos 2400 是当前旗舰处理器，分别适用于高端游戏、AI 创作、iOS 生态和游戏玩家。 立即进入“各种好用的网站点击进入”； 一、旗舰处理器（性能天花板） 1. 高通骁龙 8 Gen4 核心配置：1×Cortex-X5（3.8GHz…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • Gemini可以预测超新星爆发吗 Gemini天体事件预警系统

    Gemini可以预测超新星爆发吗 Gemini天体事件预警系统Gemini可以预测超新星爆发吗 Gemini天体事件预警系统Gemini可以预测超新星爆发吗 Gemini天体事件预警系统Gemini可以预测超新星爆发吗 Gemini天体事件预警系统

    谷歌gemini 2.5在超新星爆发预测中展现出强大能力，其通过分析历史数据与实时观测信息识别关键特征，如恒星亮度变化、光谱演变和环境扰动；构建天体事件预警系统需五个步骤：1.数据收集，2.数据处理，3.模式识别，4.实时监控，5.快速响应；然而实际应用中仍面临数据质量不一、标准不统一、训练样本不足…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • Claude如何优化多语言翻译 Claude语言模型微调方法

    Claude如何优化多语言翻译 Claude语言模型微调方法Claude如何优化多语言翻译 Claude语言模型微调方法Claude如何优化多语言翻译 Claude语言模型微调方法Claude如何优化多语言翻译 Claude语言模型微调方法

    优化claude多语言翻译能力的核心在于理解其运作机制并结合数据与策略进行干预，主要通过提示工程和模型微调两个层面实现。1. 提示工程是第一把利器，通过提供上下文、明确指令和高质量示例提升表现，例如指定翻译风格、受众或术语处理方式，并采用少样本学习引导模型理解偏好。2. 当面对专业领域或低资源语言时…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    200

  • 夸克怎么设置默认搜索引擎_夸克浏览器默认搜索工具修改方法

    夸克怎么设置默认搜索引擎_夸克浏览器默认搜索工具修改方法夸克怎么设置默认搜索引擎_夸克浏览器默认搜索工具修改方法夸克怎么设置默认搜索引擎_夸克浏览器默认搜索工具修改方法夸克怎么设置默认搜索引擎_夸克浏览器默认搜索工具修改方法

    1、打开夸克浏览器，点击右下角三横线菜单；2、进入设置→通用或搜索与浏览→搜索引擎；3、选择百度、谷歌、必应或夸克AI搜索设为默认，新标签页和地址栏将同步生效。 如果您在使用夸克浏览器时希望更改默认的搜索服务，以便每次输入关键词时自动调用您偏好的搜索引擎，可以按照以下步骤进行调整。此设置将直接影响新…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    300

  • DeepSeek如何配置灰度发布 DeepSeek渐进式更新策略

    DeepSeek如何配置灰度发布 DeepSeek渐进式更新策略DeepSeek如何配置灰度发布 DeepSeek渐进式更新策略DeepSeek如何配置灰度发布 DeepSeek渐进式更新策略DeepSeek如何配置灰度发布 DeepSeek渐进式更新策略

    灰度发布的配置应从模型版本管理、流量路由控制、实时监控与反馈、自动回滚机制等关键步骤入手。首先，确保新旧模型可并行部署并能按规则切换；其次，通过ingress控制器按比例分配流量；接着，持续监控qps、错误率等指标；最后，设置自动回滚机制以便异常时快速切换。此外，渐进式学习率预热有助于训练阶段的稳定…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    000

  • 请写一个必然会产生死锁的示例程序

    请写一个必然会产生死锁的示例程序请写一个必然会产生死锁的示例程序请写一个必然会产生死锁的示例程序请写一个必然会产生死锁的示例程序

    死锁必然发生，因代码满足互斥、持有并等待、不可抢占和循环等待四条件：线程1持lock_a等lock_b，线程2持lock_b等lock_a，形成循环依赖，导致双方永久阻塞。 死锁，在多线程编程里，它就像一个狡猾的陷阱，一旦触发，程序就会陷入无尽的等待。它不是一个“可能”发生的问题，而是在特定条件下“…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • 作业帮App如何使用AI答疑功能解答难题_作业帮App AI答疑的精准应用技巧

    作业帮App如何使用AI答疑功能解答难题_作业帮App AI答疑的精准应用技巧作业帮App如何使用AI答疑功能解答难题_作业帮App AI答疑的精准应用技巧作业帮App如何使用AI答疑功能解答难题_作业帮App AI答疑的精准应用技巧作业帮App如何使用AI答疑功能解答难题_作业帮App AI答疑的精准应用技巧

    作业帮App的AI答疑功能可通过拍照搜题、手动输入、语音提问和AI精准学四种方式高效解决学习难题，先提供答案再详解步骤，助力学生快速掌握知识点。 如果您在学习过程中遇到难以理解的题目，作业帮App的AI答疑功能可以提供快速且详细的解题思路与答案。以下是几种使用该功能的精准方法，帮助您高效解决各类学科…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    1000

  • sublime怎么配置lua lsp_sublime Lua LSP配置教程

    sublime怎么配置lua lsp_sublime Lua LSP配置教程sublime怎么配置lua lsp_sublime Lua LSP配置教程sublime怎么配置lua lsp_sublime Lua LSP配置教程sublime怎么配置lua lsp_sublime Lua LSP配置教程

    首先安装LSP和LuaExtended插件，再安装sumneko/lua-language-server，最后在LSP设置中配置正确路径，即可实现智能提示、跳转定义等功能。 要让 Sublime Text 支持 Lua 语言的智能提示、跳转定义、自动补全等高级功能，配置 LSP（Language S…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    200

  • 《2XKO》公布亚索实机预告片 风墙突刺攻防一体

    《2XKO》公布亚索实机预告片 风墙突刺攻防一体《2XKO》公布亚索实机预告片 风墙突刺攻防一体《2XKO》公布亚索实机预告片 风墙突刺攻防一体《2XKO》公布亚索实机预告片 风墙突刺攻防一体

    《2xko》今日发布了亚索的实机演示预告，这款由radiant entertainment携手拳头游戏共同打造的2v2对战格斗新作再度引发玩家关注。 实机预告片： 在本作中，亚索将作为可操作角色登场。这位以迅捷剑术著称的战士，不仅能施展流畅连击，还可借助风之力改变战场局势，展现出极具观赏性的战斗风格…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • Java 中的异常体系结构是怎样的？Error和Exception有什么区别？

    Java 中的异常体系结构是怎样的？Error和Exception有什么区别？Java 中的异常体系结构是怎样的？Error和Exception有什么区别？Java 中的异常体系结构是怎样的？Error和Exception有什么区别？Java 中的异常体系结构是怎样的？Error和Exception有什么区别？

    Java异常体系以Throwable为根，分为Error和Exception：Error表示JVM无法恢复的严重问题，如OutOfMemoryError，通常不捕获；Exception表示可处理的异常，又分受检异常（如IOException，编译器强制处理）和非受检异常（如NullPointerEx…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    200

  • 语音转字幕+画面匹配：AI剪辑工具的核心功能揭秘

    语音转字幕+画面匹配：AI剪辑工具的核心功能揭秘语音转字幕+画面匹配：AI剪辑工具的核心功能揭秘语音转字幕+画面匹配：AI剪辑工具的核心功能揭秘语音转字幕+画面匹配：AI剪辑工具的核心功能揭秘

    语音转字幕和画面匹配的核心在于利用语音识别技术和智能分析实现字幕与画面同步。首先，选择支持自定义词库和高稳定性的语音识别工具可提升识别准确率；其次，ai通过分析画面变化、识别说话人及调整字幕位置实现精准匹配；最后，实际应用中需注意时间轴微调、多语言支持、导出格式兼容性及样式统一等细节，以确保最终效果…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • 如何理解Claude的伦理限制 Claude伦理政策与使用规范解读

    如何理解Claude的伦理限制 Claude伦理政策与使用规范解读如何理解Claude的伦理限制 Claude伦理政策与使用规范解读如何理解Claude的伦理限制 Claude伦理政策与使用规范解读如何理解Claude的伦理限制 Claude伦理政策与使用规范解读

    claude 的伦理限制体现了其设计背后的价值观与逻辑，旨在引导负责任的 ai 使用。1. 对有害内容敏感是因为其内部指令机制强调拒绝虚假信息、歧视性言论及伤害性建议，并非简单过滤，而是基于任务是否有害做出判断；2. 不模仿名人说话是为了规避法律与伦理风险，鼓励原创而非复制真实人物；3. 团队协作功…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • 楼层定位，是如何实现的？

    楼层定位，是如何实现的？楼层定位，是如何实现的？楼层定位，是如何实现的？楼层定位，是如何实现的？

    最近带孩子在外地旅行，频繁使用小天才 Z10 儿童电话手表。某次打开配套 App 查看定位时，我注意到一个令人惊讶的细节：App 的地图界面竟然能准确显示孩子当前所在的建筑楼层。 作为一名通信领域的工程师，这个现象立刻引起了我的注意。 我们都知道，常见的电子设备定位方式主要包括 GPS、北斗（GNS…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

  • sublime怎么处理超大日志文件_sublime超大日志文件处理技巧

    sublime怎么处理超大日志文件_sublime超大日志文件处理技巧sublime怎么处理超大日志文件_sublime超大日志文件处理技巧sublime怎么处理超大日志文件_sublime超大日志文件处理技巧sublime怎么处理超大日志文件_sublime超大日志文件处理技巧

    通过设置大文件提示阈值和关闭高亮索引功能，可提升Sublime Text处理大日志文件的性能；2. 启用只读模式并分段查看，结合外部工具拆分文件，能有效避免卡顿崩溃；3. 对于GB级日志，建议配合Less、LogExpert等专用工具使用以获得更佳效率。 Sublime Text 虽然轻量高效，但在…

    程序猿的头像 程序猿
    2026年9月27日 • 用户投稿
    100

发表回复

登录后才能评论
关注微信