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

程序猿 • 2025年12月2日 20:08:17 • 后端开发 • 阅读 0

本教程旨在详细指导如何在Web应用中，利用jQuery实现对动态生成的订单项（如商品名称、单价、数量）进行实时总价计算。我们将探讨如何为动态元素绑定事件监听器，遍历并获取每个项目的单价和数量，最终计算出订单总价，并提供完整的代码示例与优化建议。

在构建在线订餐或购物应用时，一个常见的需求是允许用户动态添加多个商品条目，并实时显示这些条目的总价。这涉及到前端动态元素的生成、数据获取以及实时的数学计算。本教程将以一个典型的订单详情页面为例，详细讲解如何使用jquery来优雅地解决这一问题。

核心思路：动态计算与事件绑定

问题的核心在于两个方面：

动态生成元素： 用户可以点击按钮添加新的商品选择行，每行包含商品名称选择框、单价输入框和数量输入框。实时总价计算： 当任何一个商品的“数量”发生变化时，系统需要重新计算所有商品的“单价 × 数量”之和，并更新总价显示。

由于商品行是动态添加的，传统的直接事件绑定方式可能无法覆盖到新生成的元素。因此，我们需要采用一种能够处理动态元素的事件绑定策略，并在每次数量变化时，遍历所有商品行进行计算。

实现步骤与代码解析

我们将分步解析HTML结构、PHP后端逻辑以及jQuery前端实现。

HTML结构回顾

订单详情部分通常包含一个容器，用于存放所有商品条目。每个条目包含：

商品名称选择框 (select): 用于选择商品，其值会触发后端请求获取价格。单价输入框 (input[type=”text”]): 显示所选商品的单价，通常为只读。数量输入框 (input[type=”number”]): 用户输入购买数量。

                          تفاصيل الطلب
      
                        الصنف                                    اختر الصنف                                    
        
                  السعر                                
        
                  الكمية

注意，为了方便jQuery选择和操作，我们为价格输入框添加了 price 类，为数量输入框添加了 quantity 类，为总价输入框添加了 total ID。

PHP后端服务

PHP后端（GetPrice.php）负责根据前端传递的商品名称（或ID）从数据库中查询并返回对应的价格。

prepare("SELECT price FROM all_menu WHERE `item_name` = :item_name");        $get_c->bindParam(':item_name', $id); // 使用参数绑定防止SQL注入        $get_c->execute();         while ($row = $get_c->fetch()) {            $code .= $row['price'];        }        echo $code.'.00'; // 返回价格，格式化为 .00    }?>

重要提示： 在实际生产环境中，请务必使用预处理语句和参数绑定来防止SQL注入，如上述代码所示。

jQuery前端逻辑

jQuery代码是实现动态功能的核心。

1. 获取商品价格

当用户选择商品名称时，通过AJAX请求后端获取价格并填充到对应的价格输入框。对于动态添加的行，需要为每个新行单独绑定 change 事件。

// 初始行的事件绑定$('#itemname').change(function(){  var code = $(this).val();    $.ajax({    type: 'POST',    url: 'pages/GetPrice.php',    data:{code:code},    success: function(data){      $('#price').val(data); // 使用jQuery选择器更简洁      handleQuantityChange(); // 价格更新后也可能影响总价，触发计算    },    error: function (jqXHR, textStatus, errorThrown){      alert(errorThrown);    }  });});

2. 动态添加行

点击“添加商品”按钮时，复制现有HTML结构并插入到页面中，同时为新行的元素赋予唯一的ID（如果需要）。

var nextRowID = 0;$('#add').click(function(e){  e.preventDefault();  var id = ++nextRowID;  // 构建新的行HTML，注意ID的动态生成  var newRowHtml = 'تفاصيل الطلب
الصنفاختر الصنف
السعر
الكمية
';  $('#append').append(newRowHtml);  // 为新添加的商品名称选择框绑定事件  $('#itemname'+id+'').change(function(){    var code = $(this).val();      var currentRowId = $(this).attr('id').replace('itemname', ''); // 获取当前行的ID后缀    $.ajax({      type: 'POST',      url: 'pages/GetPrice.php',      data:{code:code},      success: function(data){        $('#price'+currentRowId+'').val(data);        handleQuantityChange(); // 价格更新后，重新计算总价      },      error: function (jqXHR, textStatus, errorThrown){        alert(errorThrown);      }    });  });  // 每次添加新行后，重新绑定或触发数量变化事件  handleQuantityChange(); });

3. 核心：动态总价计算函数

这是解决问题的关键。我们需要一个函数来遍历所有商品行，获取它们的单价和数量，然后计算总和。

function handleQuantityChange(){  // 解除旧的change事件绑定，然后重新绑定，确保只执行一次  // 对于动态添加的元素，更推荐使用事件委托（见注意事项）  $('.quantity').unbind('change').change(function(){    let totalAmount = 0.0;    // 遍历所有具有 'price' 类的输入框    $('.price').each(function(){      const priceElement = $(this);      // 找到与当前价格输入框在同一商品行内的数量输入框      // 这里通过 DOM 结构进行查找：      // priceElement.parent() ->  (价格输入框的父级)      // .parent() ->  (价格输入框的form-group)      // .next() ->  (数量输入框的form-group)      // .find('.quantity') -> 找到其中的数量输入框      const quantityElement = priceElement.closest('.form-group').next('.form-group').find('.quantity');      const price = parseFloat(priceElement.val()) || 0; // 确保是数字，默认为0      const quantity = parseFloat(quantityElement.val()) || 0; // 确保是数字，默认为0      totalAmount += price * quantity;    });    // 更新总价显示    $('#total').val(totalAmount.toFixed(2)); // 保留两位小数  });  // 首次加载或添加新行后，立即触发一次计算，确保总价是正确的  // 模拟一次数量变化，以便在页面加载时或新行添加后立即计算总价  $('.quantity').first().trigger('change');}

DOM遍历解释：priceElement.closest(‘.form-group’) 向上查找最近的 .form-group 父元素，这是包含价格输入框的整个行容器。next(‘.form-group’) 找到这个 form-group 的下一个兄弟元素，这通常是包含数量输入框的 form-group。find(‘.quantity’) 在这个数量的 form-group 中查找 quantity 类。

4. 整合事件监听

在文档加载完成后，以及每次动态添加新行后，都需要调用 handleQuantityChange() 函数，以确保所有当前存在的数量输入框都能正确绑定事件，并且总价能够被实时更新。

$(document).ready(function(){  // 页面加载完成后，初始化总价计算  handleQuantityChange();  // 初始行的商品名称选择事件  $('#itemname').change(function(){    var code = $(this).val();      $.ajax({      type: 'POST',      url: 'pages/GetPrice.php',      data:{code:code},      success: function(data){        $('#price').val(data);        handleQuantityChange(); // 价格更新后，重新计算总价      },      error: function (jqXHR, textStatus, errorThrown){        alert(errorThrown);      }    });  });  // 添加新行的按钮点击事件  var nextRowID = 0;  $('#add').click(function(e){    e.preventDefault();    var id = ++nextRowID;    // 构建新的行HTML，注意ID的动态生成    var newRowHtml = 'تفاصيل الطلب
الصنفاختر الصulo
السعر
الكمية
';    $('#append').append(newRowHtml);    // 为新添加的商品名称选择框绑定事件    $('#itemname'+id+'').change(function(){      var code = $(this).val();        var currentRowId = $(this).attr('id').replace('itemname', '');      $.ajax({        type: 'POST',        url: 'pages/GetPrice.php',        data:{code:code},        success: function(data){          $('#price'+currentRowId+'').val(data);          handleQuantityChange(); // 价格更新后，重新计算总价        },        error: function (jqXHR, textStatus, errorThrown){          alert(errorThrown);        }      });    });    // 每次添加新行后，重新绑定或触发数量变化事件    handleQuantityChange();   });});

注意事项与优化建议

事件委托 (Event Delegation):在 handleQuantityChange 函数中，我们使用了 $(‘.quantity’).unbind(‘change’).change(…) 来重新绑定事件。这种方法在每次添加新行时都会解除并重新绑定所有 .quantity 元素的 change 事件。对于频繁添加新行的场景，这可能导致性能问题。更推荐的做法是使用事件委托，将事件绑定到父元素上，利用事件冒泡来监听动态子元素的事件。这样，无论何时添加新的 .quantity 元素，事件监听器都无需重新绑定。

// 优化后的 handleQuantityChange 函数function handleQuantityChange() {  let totalAmount = 0.0;  // 遍历所有具有 'price' 类的输入框  $('.price').each(function(){    const priceElement = $(this);    const quantityElement = priceElement.closest('.form-group').next('.form-group').find('.quantity');    const price = parseFloat(priceElement.val()) || 0;    const quantity = parseFloat(quantityElement.val()) || 0;    totalAmount += price * quantity;  });  $('#total').val(totalAmount.toFixed(2));}// 在 document ready 中使用事件委托$(document).ready(function(){  // 绑定数量输入框的change事件，使用事件委托  // 这里的'body'可以替换为更具体的、不会动态变化的父容器  $('body').on('change', '.quantity', handleQuantityChange);  // 绑定商品名称选择框的change事件，同样使用事件委托  $('body').on('change', '[name="itemname[]"]', function(){ // 使用name属性选择器更通用    var code = $(this).val();      var currentItemSelect = $(this); // 获取当前触发事件的select元素    $.ajax({      type: 'POST',      url: 'pages/GetPrice.php',      data:{code:code},      success: function(data){        // 找到当前select元素所在行的价格输入框        currentItemSelect.closest('.form-group').nextAll('.form-group').find('.price').val(data);        handleQuantityChange(); // 价格更新后，重新计算总价      },      error: function (jqXHR, textStatus, errorThrown){        alert(errorThrown);      }    });  });  // 添加新行的按钮点击事件  var nextRowID = 0;  $('#add').click(function(e){    e.preventDefault();    var id = ++nextRowID;    // 构建新的行HTML，注意ID的动态生成    // 确保新生成的select和input有正确的class和name属性    var newRowHtml = 'تفاصيل الطلب
الصنفاختر الصنف
السعر
الكمية
';    $('#append').append(newRowHtml);    // 添加新行后，触发一次总价计算，以防新行有默认值    handleQuantityChange();   });  // 页面加载时，首次触发总价计算  handleQuantityChange();});

使用事件委托后，handleQuantityChange 函数本身不再需要负责绑定事件，它只负责计算逻辑。

数据类型转换与验证：在使用 parseFloat() 进行计算时，务必确保输入框的值是有效的数字。如果用户输入了非数字字符，parseFloat() 可能会返回 NaN。在计算前，可以使用 isNaN() 或逻辑或 || 0 来处理这种情况，确保计算结果的正确性。例如：parseFloat(value) || 0。

用户体验：

初始值： 确保数量输入框有合理的初始值（如 value=”1″ 或 value=”0″）。禁用只读字段： 价格字段设置为 readonly 是一个好习惯，防止用户误修改。格式化输出： 总价输出时，使用 toFixed(2) 可以确保金额显示为两位小数，符合财务规范。

总结

通过本教程，我们学习了如何利用jQuery处理动态生成的HTML元素，并实现复杂的实时计算逻辑。关键在于理解事件绑定的策略（尤其是事件委托），以及如何在DOM结构中准确地定位相关元素。掌握这些技术，将使您能够构建更加动态、响应式的Web应用。在实际开发中，始终考虑代码的可维护性、性能和用户体验，选择最适合当前场景的实现方式。

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

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

html元素事件冒泡属性选择器格式化输出点击事件防止sql注入

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

268.2K 文章

0 评论

1 粉丝

这个人很懒，什么都没有留下～

Go 语言中的 .a 文件详解

上一篇 2025年12月2日 20:06:37

Go语言中高效解析HTTP风格消息：net/textproto实践指南

下一篇 2025年12月2日 20:08:21

后端开发

解决 jQuery AJAX 无法发送超过两个值的问题

本文将详细介绍如何解决 jQuery AJAX 无法发送超过两个值的问题。核心思路是：与其绑定到按钮的点击事件，不如绑定到 form 的 submit 事件。这样做的好处是，客户端的表单验证可以正确工作，并且 JS 代码会小得多。最佳实践：绑定 Form 的 Submit 事件直接绑定按钮的 …

程序猿
2025年12月5日
1000
js如何实现剪贴板历史 js剪贴板历史管理的4种技术方案

要实现js剪贴板历史，核心在于拦截复制事件、存储复制内容并展示历史记录。1. 使用document.addeventlistener(‘copy’)监听复制事件，并通过e.clipboarddata.getdata获取内容；2. 用localstorage或indexeddb…

程序猿
2025年12月5日 • web前端
1000
js怎样实现粒子动画效果炫酷粒子动画的3种实现方式

实现炫酷的粒子动画可通过以下三种方式：1. 使用 canvas 实现基础 2d 粒子动画，通过创建 canvas 元素、定义粒子类、使用 requestanimationframe 创建动画循环来不断更新和绘制粒子；2. 使用 three.js 实现 3d 粒子动画，借助 webgl 渲染器、场景、…

程序猿
2025年12月5日 • web前端
0000
JS怎么实现悬浮窗拖拽 4行代码让元素支持鼠标自由拖拽

js实现悬浮窗拖拽的核心是监听鼠标事件并更新位置。1. 优化性能：使用transform: translate()替代left和top以启用gpu加速，并通过节流函数限制mousemove触发频率；2. 限制范围：在mousemove中计算悬浮窗位置，确保不超出屏幕边界；3. 处理事件冲突：mous…

程序猿
2025年12月5日 • web前端
0000
js怎么实现svg动态绘制 SVG路径动画与交互实现

svg动态绘制通过js操控svg的dom元素属性实现路径动画、颜色变化和交互动画。1. 路径动画通过控制path的d属性，结合strokedasharray和strokedashoffset实现绘制效果；2. 颜色变化通过setinterval或requestanimationframe定时修改fi…

程序猿
2025年12月5日 • web前端
0000
java

string在java中的含义 String类的特性和常用方法

java中的string类是不可变的，这意味着其内容创建后不能改变。string类的主要特性和常用方法包括：1) 不可变性确保线程安全，但可能影响性能；2) 作为final类，行为一致；3) length()方法返回字符串长度；4) charat()方法获取指定索引处的字符；5) substring…

程序猿
2025年12月5日
0000
Java中Jsoup的作用解析HTML解析库

jsoup是java中强大的html解析库，提供直观高效的api用于处理网页数据。其核心功能包括解析html为dom树、使用css选择器遍历文档、提取元素内容、修改html结构及清理不规范标签。常见用途涵盖网页抓取、数据清洗、内容提取和html生成。相比其他库，jsoup具备易用性、强大选择器、容错…

程序猿
2025年12月5日 • java
0000
后端开发

PHP isset() 函数的行为解析：理解与空值及未定义变量的交互

本文深入探讨PHP isset() 函数在处理空字符串和未定义变量时的具体行为，尤其是在处理HTTP GET参数时的常见误解。通过对比 isset() 和 empty() 函数，文章将阐明为何 isset() 对空字符串返回 true，并提供最佳实践，帮助开发者有效验证和处理用户输入数据，确保Web…

程序猿
2025年12月5日
0000
js怎样检测用户操作空闲状态 js检测用户空闲状态的5种实用方案

检测用户在 javascript 中的空闲状态可通过监听用户活动事件并设置定时器实现，具体包括以下5种方案：1. 监听 mousemove、keydown、touchstart、click 事件并在事件触发时重置定时器；2. 使用防抖优化频繁触发事件的性能；3. 利用 localstorage 或 …

程序猿
2025年12月5日 • web前端
0000
PHP框架

如何在Laravel中实现权限管理

1.spatie/laravel-permission包提供rbac与pbac混合模型，支持角色权限分配、权限检查及与laravel gates/policies无缝集成；2.结合laravel policies可实现基于模型实例的细粒度控制，如限制用户仅能编辑自己的文章；3.blade模板中使用@…

程序猿
2025年12月5日
0000
后端开发

动态年份范围选择器在PHP与MySQL中的实现

本教程详细介绍了如何利用PHP和MySQL构建一个动态的年份范围选择器，用于过滤数据库记录。文章涵盖了从数据库中获取最小和最大年份、生成5年间隔的选项、构建HTML下拉菜单，到处理用户选择并使用SQL的BETWEEN操作符进行数据过滤的全过程。同时强调了使用预处理语句防止SQL注入等安全实践。 1.…

程序猿
2025年12月5日
0000
Java中如何生成XML 详解DOM方式创建XML文档

使用dom方式创建xml文档的步骤如下：1. 创建documentbuilderfactory对象；2. 创建documentbuilder对象；3. 创建document对象；4. 创建根元素并添加到document对象；5. 创建子元素和文本节点；6. 将元素逐级添加到dom树；7. 使用tra…

程序猿
2025年12月5日 • java
0000
PHP框架

如何在Laravel中实现数据补全

数据补全功能可在用户输入不完整信息时智能猜测并提供完整选项，laravel中可通过前后端协作实现：1.前端使用typeahead.js、select2或awesomplete监听输入框并发送ajax请求；2.后端创建路由和控制器接收输入值，用eloquent orm结合like或全文搜索技术查询数据…

程序猿
2025年12月5日
0000
js怎样实现卡片翻转动画 js卡片翻转效果的4种实现方案

js实现卡片翻转动画的核心在于控制css的transform属性并配合transition，具体方案如下：1.最简单的是通过js切换css类实现翻转；2.直接操作transform属性以动态控制角度；3.使用requestanimationframe优化动画性能；4.引入gsap动画库简化开发流程。…

程序猿
2025年12月5日 • web前端
0000
数据库

MySQL怎样优化SQL语句 MySQL高效SQL语句编写的技巧与规范

mysql优化sql语句的核心是提升查询速度并减少资源消耗，需通过索引优化、查询结构改进和配置调优等多方面协同实现。1. 索引优化：应根据查询类型选择合适的索引（如b-tree用于范围查询，hash用于等值查询），在where、order by、group by涉及的列上创建索引，优先为高选择性列建…

程序猿
2025年12月5日
0000
PHP框架

如何在Laravel中优化数据库查询

优化laravel数据库查询的核心在于减少查询次数、优化语句、使用缓存和合理索引。1. 使用eager loading（如with()方法）避免n+1问题，减少查询次数；2. 选择特定列而非select *，降低i/o负担；3. 必要时使用原生查询并绑定参数防止注入；4. 利用缓存（如cache::…

程序猿
2025年12月5日
0000
web前端

在同一页面实现多个独立库存计数器：利用自定义元素解决状态隔离问题

本文介绍如何通过JavaScript自定义元素（Custom Elements）在同一网页上实现多个独立的动态库存计数器。针对传统方法中ID冲突和localStorage共享导致的问题，我们构建了一个可重用的组件，每个组件都能独立管理其库存数量，并支持通过localStorage进行持久化，从而解决…

程序猿
2025年12月5日
0000
从连接到插入：PHP操作MySQL全流程

1.使用mysqli扩展建立与mysql数据库的连接；2.编写sql语句准备操作数据；3.执行sql语句完成数据插入等操作；4.通过预处理语句防止sql注入攻击；5.使用try…catch块处理连接错误；6.通过持久连接、索引、避免select *、批量插入、缓存和优化sql语句提升性能…

程序猿
2025年12月5日 • 后端开发
3000
ThinkPHP的安全机制是什么？ThinkPHP如何防止SQL注入？

thinkphp通过参数绑定、配置安全措施及输入过滤机制防止sql注入等安全问题。1. 参数绑定：使用where()或bind()方法将数据与sql语句分离，防止恶意代码执行；2. 配置安全：关闭调试模式、验证上传文件、定期更新框架、限制数据库权限、使用https；3. 输入过滤：默认使用htmls…

程序猿
2025年12月5日 • PHP框架
0000
PHP怎么实现数据关联统计多表关联统计的3种SQL方案

实现数据关联统计的php方案主要包括使用join语句、子查询和临时表。1. join语句通过连接多表并基于共同字段进行分组统计，适用于直观且逻辑清晰的多表关联；2. 子查询将一个查询结果作为另一个查询的条件，可简化部分复杂查询但可能影响性能；3. 临时表用于存储中间结果，分解复杂查询为多个简单步骤，…

程序猿
2025年12月5日 • 后端开发
0000