如何通过name属性获取多个input值并实现求和？

算力阿峰

2026-5-21

解决readonly价格输入框的求和问题

看起来你在尝试对多个readonly的价格输入框求和时遇到了问题，我来帮你梳理一下问题所在并给出解决方案：

问题分析

你当前代码的两个核心问题：

选择器不匹配：你用了$('input[name^="produtosBonificacao[].Preco"]')，但你的输入框name是produtosBonificacao[0].Preco、produtosBonificacao[1].Preco，前缀是produtosBonificacao[0]而不是produtosBonificacao[]，所以这个选择器找不到任何元素，求和结果始终为0。
字符串未转数字：$(this).val()获取的是字符串类型，直接相加会变成字符串拼接（比如"15" + "25"得到"1525"而不是40），导致求和逻辑完全错误。

修正后的完整函数

function subotal() {
    let sum = 0.0;
    // 精准匹配所有目标价格输入框：name以produtosBonificacao[开头，且以.Preco结尾
    $('input[name^="produtosBonificacao["][name$=".Preco"]').each(function () {
        // 将输入值转为浮点数，空值/非数字则按0处理
        const price = parseFloat($(this).val()) || 0;
        sum += price;
    });
    // 保留两位小数（根据需求调整），避免浮点数精度问题
    sum = parseFloat(sum.toFixed(2));
    // 这里可以添加代码将结果展示到页面，比如：
    // $('#totalAmount').text(`R$ ${sum.toFixed(2)}`);
    console.log('总价：', sum);
    return sum;
}

关键细节说明

选择器优化：name^="produtosBonificacao["确保选中所有带索引的produtosBonificacao输入框，name$=".Preco"进一步筛选出价格字段，避免误选其他同前缀的输入框。
空值/非数字处理：parseFloat($(this).val()) || 0能处理输入框为空、或者意外填入非数字内容的情况，防止sum变成NaN。
浮点数精度处理：用toFixed(2)保留两位小数，再转成浮点数，避免出现类似0.1+0.2=0.30000000000000004的精度问题。