JavaScript如何将多个表单字段值累加至同一变量并实时求和

第一步：补充总和展示元素 #

在你需要展示总数值的页面位置添加如下元素：

<p>总营收：<span id="total-revenue">0</span></p>

第二步：完整实现代码 #

你的原有代码仅获取了当前触发输入事件的单个输入框值，没有遍历所有匹配字段做累加，调整后逻辑如下，可直接替换原有监听代码：

// 监听所有revenue开头的输入框的输入事件（支持键盘输入、粘贴等全场景）
$("input[id^='revenue-']").on('input', function() {
    let total = 0;
    // 遍历所有匹配的输入框做累加
    $("input[id^='revenue-']").each(function() {
        // 取值并去除首尾空格
        const val = $(this).val().trim();
        // 仅累加有效数字，自动忽略空值、非数字内容
        if(val && !isNaN(Number(val))) {
            total += Number(val);
        }
    });
    // 将总和渲染到页面，toFixed参数可调整保留小数位数，比如填2就是保留两位小数
    $("#total-revenue").text(total.toFixed(0));
});

可选优化项 #

• 如果要限制用户只能输入数字，可给所有收入输入框添加type="number"属性，避免非数字输入的无效情况
• 如果需要在逻辑中直接使用总和变量，直接调用代码中的total变量即可

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