如何在jQuery中设置多输入框同步触发keyup事件实现金额合计

你可以直接替换原有JS代码为以下内容，即可实现单行金额计算+所有行总金额自动统计的功能，同时兼容非数字输入的异常场景：

// 统计所有行总金额
function calcTotalAmount() {
  let sum = 0;
  $(".total").each(function() {
    sum += Number($(this).val()) || 0;
  });
  $("#totalvalue").val(sum);
}

// 批量绑定所有数量、单价输入框的keyup事件
$("input[id^='quantity-'], input[id^='price-']").on('keyup', function() {
  // 提取当前行的序号
  const rowNum = this.id.split('-')[1];
  const price = Number($(`#price-${rowNum}`).val()) || 0;
  const count = Number($(`#quantity-${rowNum}`).val()) || 0;
  // 写入单行总价
  $(`#total-${rowNum}`).val(price * count);
  // 更新总金额
  calcTotalAmount();
});

额外说明：

• 原有重复的4行事件绑定逻辑被替换为通用批量绑定，后续新增商品行只要保持price-序号、quantity-序号、total-序号的id命名规则，无需新增JS代码即可自动适配
• 代码中增加了非数字输入的兼容处理，当输入框为空、输入非数字内容时，自动按0计算，不会出现NaN异常
• 你原有HTML代码中所有name"amt"的写法存在语法错误，建议修正为name="amt"，避免后续表单提交出现问题

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