使用jQuery change()方法计算输入值总和时失效的问题求助

原代码存在的问题 #

• 第一段代码遍历的是.col-md-9容器（div元素），而非容器内的输入框，div没有val()方法，无法获取输入值。
• 使用change事件仅在输入框失去焦点时触发，无法实现实时输入实时计算的需求。
• 更新#OrderTotalValue时用了html()，但目标元素是输入框，应该用val()来设置值。
• 第二段代码给div绑定change事件无效，div本身不会触发该事件；且用parseInt会丢失小数精度，未处理空值/非数字的情况。

有效解决方案 #

核心修正点 #

1. 监听输入框的input事件（实时响应输入操作）。
2. 遍历目标输入框（排除总和输入框本身），获取每个输入框的数值。
3. 处理空值、非数字的情况，避免计算错误。
4. 使用val()更新总和输入框的值。

最终代码 #

$(document).ready(function() {
  // 监听所有参与计算的输入框的input事件
  $("#EditTotals input:not([name='OrderTotalValue'])").on('input', function() {
    let calculatedTotalSum = 0;
    
    // 遍历所有参与计算的输入框
    $("#EditTotals input:not([name='OrderTotalValue'])").each(function() {
      const value = $(this).val().trim();
      // 仅当值为有效数字时累加
      if ($.isNumeric(value)) {
        calculatedTotalSum += parseFloat(value);
      }
    });
    
    // 更新总和输入框的值，保留两位小数（可根据需求调整位数）
    $("#OrderTotalValue").val(calculatedTotalSum.toFixed(2));
  });
});

补充说明 #

• 选择器input:not([name='OrderTotalValue'])确保不会把总和输入框本身的值再次加入计算。
• toFixed(2)用于保留两位小数，可根据业务需求修改小数位数。
• 若你的<editor>标签最终渲染成的输入框name属性不是OrderTotalValue，请根据实际渲染后的HTML调整选择器（比如用id选择器#OrderTotalValue，前提是输入框有对应的id）。

内容的提问来源于stack exchange，提问作者non