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

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

程序猿 • • 用户投稿

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

本教程旨在详细指导如何在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/1288045.html

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

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
SQL中处理逗号分隔字符串的高效匹配技巧：跨表关联与模式匹配
上一篇 2025年12月11日 04:45:58
PHP中判断数值是否为整数或存在小数部分的方法
下一篇 2025年12月11日 04:46:02

相关推荐

  • 微信小程序后端API开发指南 用户投稿

    微信小程序后端API开发指南

    开发微信小程序的后端api需要以下步骤：1. 熟悉restful api设计模式和相关技术；2. 设计简洁明了的api接口；3. 确保api的安全性；4. 处理并发请求和优化api性能；5. 实施api版本控制。 开发微信小程序的后端API，这可不是一件简单的事儿啊！但别担心，我会带你一步步揭开这层…

    程序猿的头像 程序猿
    2026年8月27日
    100
  • MySQL如何实现数据加密存储 字段级加密与解密操作指南 用户投稿

    MySQL如何实现数据加密存储 字段级加密与解密操作指南

    mysql实现数据加密存储的核心是通过字段级加密保护敏感信息。1. 选择aes等安全高效的加密算法，优先使用aes而非des或rsa以平衡性能与安全性；2. 创建aes_encrypt和aes_decrypt自定义函数利用mysql内置aes_encrypt/aes_decrypt实现加解密；3. …

    程序猿的头像 程序猿
    2026年8月27日
    100
  • Java中使用字母表编码单词 用户投稿

    Java中使用字母表编码单词

    本文介绍了如何使用Java将单词按照给定的字母表进行编码。通过示例代码详细讲解了编码的实现过程，包括字母大小写转换、循环顺序调整以及结果输出格式化等方面，帮助读者理解并掌握该编码方法。 在Java中，我们经常需要将字符串按照特定的规则进行编码。例如，给定一个字母表，我们需要将一个单词转换为该字母表中…

    程序猿的头像 程序猿
    2026年8月27日
    100
  • PHP函数库设计原则是什么_PHP函数库设计最佳实践 用户投稿

    PHP函数库设计原则是什么_PHP函数库设计最佳实践

    设计PHP函数库需遵循命名清晰、单一职责、输入验证、文档化等原则。函数名应动词开头，如sendEmail()；每个函数只做一件事；参数需校验并抛出异常；添加PHPDoc注释；避免全局依赖；返回值保持一致。 设计PHP函数库时，核心目标是提升代码的可重用性、可维护性和易用性。良好的函数库不仅让开发者使…

    程序猿的头像 程序猿
    2026年8月27日
    100
  • 告别繁琐的DOM操作：如何使用s9e/sweetdom优雅地处理XML和XSLT模板 用户投稿

    告别繁琐的DOM操作：如何使用s9e/sweetdom优雅地处理XML和XSLT模板

    可以通过一下地址学习composer：学习地址 最近在开发一个需要频繁操作xml文档，尤其是xslt模板的项目时，我遇到了一个让人头疼的问题。php原生的dom扩展虽然功能强大，但其api设计往往显得过于底层和繁琐。例如，创建一个新元素、将其插入到指定位置，或者执行一个xpath查询，都需要好几行代…

    程序猿的头像 程序猿
    2026年8月26日
    100
  • java中mapper层的作用 mapper在MyBatis中的功能解析 用户投稿

    java中mapper层的作用 mapper在MyBatis中的功能解析

    在java中，mapper层在mybatis框架中负责将数据库操作映射到java对象上。具体作用包括：1.定义与数据库交互的接口，包含crud操作；2.通过xml文件或注解将sql语句与java方法关联，实现代码与sql的分离；3.支持动态sql，适应复杂查询需求。 让我们从一个简单的问题开始：在J…

    程序猿的头像 程序猿
    2026年8月26日
    000
  • Java中计算对象数组中特定属性的平均值和最大值 用户投稿

    Java中计算对象数组中特定属性的平均值和最大值

    本教程详细介绍了如何在Java中处理包含字符串和整数变量的对象数组，并计算其中特定整数属性（如分数）的平均值和最高值。我们将通过一个`Student`对象数组的示例，演示如何正确设计类、遍历数组、访问对象属性以及实现统计计算逻辑，同时强调正确的Getter方法签名。 在Java开发中，我们经常需要处…

    程序猿的头像 程序猿
    2026年8月25日
    000
  • 如何在Laravel API中实现分页？ 用户投稿

    如何在Laravel API中实现分页？

    在laravel api中实现分页可以通过paginate和cursorpaginate方法实现。1）使用paginate方法并格式化json响应，2）动态调整每页数据量，3）确保排序安全性，4）使用cursorpaginate方法处理大量数据，5）实现无限滚动加载。 在Laravel API中实现…

    程序猿的头像 程序猿
    2026年8月25日
    000

  • Java中JDBC的作用是什么 详解JDBC规范统一数据库操作的优势

    Java中JDBC的作用是什么 详解JDBC规范统一数据库操作的优势Java中JDBC的作用是什么 详解JDBC规范统一数据库操作的优势Java中JDBC的作用是什么 详解JDBC规范统一数据库操作的优势Java中JDBC的作用是什么 详解JDBC规范统一数据库操作的优势

    jdbc通过提供标准api简化数据库操作。1. 加载数据库驱动，2. 建立数据库连接，3. 执行sql语句，4. 处理结果集。使用preparedstatement可有效防止sql注入攻击，同时对用户输入进行验证、过滤及采用最小权限原则进一步保障安全性。 JDBC（Java Database Con…

    程序猿的头像 程序猿
    2026年8月25日 • 用户投稿
    000
  • React 开关按钮点击无响应怎么办？ 用户投稿

    React 开关按钮点击无响应怎么办？

    解决点击“开关”按钮无响应问题 在提供的 react 代码中，“开关”按钮点击事件不响应的原因可能是由于： 事件名拼写错误：请确保 onclick 属性拼写正确，并且事件处理函数名为 handleclick。元素遮盖：检查按钮是否被其他元素遮挡，例如另一个按钮或 div。控制台重写：如果您的代码中对…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 如何自定义 details 和 summary 元素的点击范围，仅对图标起作用？ 用户投稿

    如何自定义 details 和 summary 元素的点击范围，仅对图标起作用？

    定制 details 和 summary 元素的点击范围 本文旨在解决如何自定义 details 和 summary 元素的点击范围，使其只对特定区域起作用。 问题描述 一位用户想要创建一个类似树形结构的表格，其中 details 和 summary 元素用于展开和关闭内容。但是，当前点击该行的任何…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • 如何仅通过点击行最前面的图标展开或隐藏 和 标签中的内容？ 用户投稿

    如何仅通过点击行最前面的图标展开或隐藏 和 标签中的内容？

    点击范围自定义：细节和概要 在 html 中，ails> 和 标签可以创建可折叠的内容。通常，单击行中的任何位置都可以展开或关闭内容。但是，为了实现更精细的控制，可以通过自定义点击范围来指定仅特定区域可以触发操作。 问题详情 一位开发者希望构建一个类似树形表的内容，但希望只能通过点击行最前面的…

    程序猿的头像 程序猿
    2025年12月24日
    100
  • 如何仅通过点击图标来控制``和``的折叠和展开？ 用户投稿

    如何仅通过点击图标来控制“和“的折叠和展开？

    自定义details、summary控件的点击范围 目前，使用 和 标签创建树形结构时，整个行的点击都会触发折叠或展开操作。为了仅当点击最前面的图标时才触发此操作，可以进行以下调整： 在summary中添加额外的标签：在 标签中，添加一个额外的标签来包裹图标。 阻止的默认行为：使用css，为设置ev…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • React 按钮点击事件不响应怎么办？ 用户投稿

    React 按钮点击事件不响应怎么办？

    react 按钮点击事件不响应 你的代码中遇到了一个问题，导致点击按钮时没有响应。这里有原因和解决方法： 1. 按钮不响应的原因 经过仔细检查，我们在你的代码中没有发现明显的错误。请检查以下可能的原因： 事件名称是否拼写正确（”onclick”）？元素是否被遮盖或禁用？con…

    程序猿的头像 程序猿
    2025年12月24日
    300
  • React 中“开关”按钮点击无响应，如何排查问题？ 用户投稿

    React 中“开关”按钮点击无响应，如何排查问题？

    点击“开关”按钮无响应，原因分析 在给出的 react 代码中，“开关”按钮未响应点击事件，可能原因如下： 事件名书写错误：确保 handleclick 方法的 onclick 事件名拼写正确。变量名错误：检查 handleclick 方法的 onclick 事件是否正确引用了 handleclic…

    程序猿的头像 程序猿
    2025年12月24日
    300
  • 为什么点击开关按钮没有响应？ 用户投稿

    为什么点击开关按钮没有响应？

    点击开关按钮无响应的问题分析 在提供的代码中，按钮点击事件绑定的处理函数 handleclick 的写法没有问题。因此，按钮不响应的原因可能是由于以下因素： 事件名书写错误：请检查 onclick={handleclick} 中的事件名是否拼写正确，应该是 onclick 而不是 onclick。元…

    程序猿的头像 程序猿
    2025年12月24日
    500
  • 如何使用 SVG 实现动态时间轴的复杂效果？ 用户投稿

    如何使用 SVG 实现动态时间轴的复杂效果？

    SVG 实现动态时间轴 这个问题涉及到实现一个复杂的动态时间轴，其中包含了渐变进度、可点击的小圆点、弹出卡片和高斯模糊效果。 SVG 解决方案 使用 SVG 可以很好地满足这个需求，因为它提供了精确绘制和控制线条、形状和文本的能力。 具体实现 示例代码使用了 SVG 来创建一条渐变的轨迹，代表时间轴…

    程序猿的头像 程序猿
    2025年12月24日
    000
  • uniapp/vue 中父元素 pointer-events: none 如何让子元素点击事件生效？ 用户投稿

    uniapp/vue 中父元素 pointer-events: none 如何让子元素点击事件生效？

    在 uniapp/vue 中解决父元素 pointer-events: none 下子元素点击事件无效的问题 在使用 uniapp/vue 时，当父元素设置了 pointer-events: none 属性后，子元素的点击事件可能会失效。 问题分析 当父元素设置为 pointer-events: n…

    程序猿的头像 程序猿
    2025年12月24日
    200
  • UniApp/Vue 中如何让父元素 Pointer-Events: None 下的子元素点击生效? 用户投稿

    UniApp/Vue 中如何让父元素 Pointer-Events: None 下的子元素点击生效?

    在 uniapp/vue 中让父元素 pointer-events: none 下的子元素点击生效 当我们设置父元素的 pointer-events 为 none 时，它将阻止鼠标或触摸事件传递给子元素。在这种情况下，底部的点击事件将无法生效。 要解决此问题，可以给需要点击事件的子元素添加 poin…

    程序猿的头像 程序猿
    2025年12月24日
    200
  • 如何在父元素 `pointer-events: none` 时让子元素点击事件生效？ 用户投稿

    如何在父元素 `pointer-events: none` 时让子元素点击事件生效？

    如何在父元素 pointer-events: none 下保持子元素点击事件生效？ 在使用 uniapp/vue 框架时，遇到这样的问题：给父元素设置 pointer-events: none 后，子元素的点击事件失效了。 要解决这个问题，在需要点击事件的子元素上添加以下 css 样式即可： poi…

    程序猿的头像 程序猿
    2025年12月24日
    100

发表回复

登录后才能评论
关注微信