使用JavaScript on.change函数计算总和显示00.000.000.00，求原因及解决方案

我来帮你分析下这个问题的原因，以及对应的解决方案：

问题原因 #

你遇到的两个异常情况，根源其实是输入值的格式处理和数值转换的冲突：

• 显示00.000.000.00：大概率是你的.totalprc输入框用了数字掩码插件（或者自带的格式限制），当你直接把计算出的数字（比如0）赋值给它时，掩码规则会把这个数字转换成带多分隔点的格式。
• 换写法后只显示第一位数字：如果输入框里的值已经是被格式化过的（比如100.00），parseFloat能正常工作，但如果值是像00.000.000.00这种带多个小数点的字符串，parseFloat只会读取到第一个小数点前的有效数字（也就是0），导致计算结果错误，最终显示异常。

解决方案 #

我们需要把数值计算和格式显示分开处理：先保证计算用的是纯数值，再对计算结果进行正确的格式化后赋值给输入框。

修正后的代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input class="prc" value="0.00" type="text" /> 
<input class="prc" value="0.00" type="text" /> 
<input class="prc" value="0.00" type="text" /> 
<input class="totalprc" type="text" />

<script>
$(document).on('change', '.prc', function() { 
    let tSum = 0; 
    $('.prc').each(function() { 
        // 先清洗输入值，只保留数字和小数点，再转换为数值，非数字则按0处理
        const cleanValue = $(this).val().replace(/[^0-9.]/g, '');
        const value = parseFloat(cleanValue) || 0;
        tSum += value; 
    }); 
    // 对总和进行格式化：保留两位小数，添加千分位分隔符
    const formattedSum = tSum.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    $('.totalprc').val(formattedSum); 
}); 
</script>

代码说明 #

• 数值转换部分：用replace(/[^0-9.]/g, '')清除输入值里的非数字（除了小数点），确保parseFloat能正确转换；同时用|| 0处理空值或非数字的情况，避免NaN干扰计算。
• 结果格式化部分：
  • toFixed(2)确保总和保留两位小数，符合金额类输入的常见需求
  • replace(/\B(?=(\d{3})+(?!\d))/g, '.')给数字添加千分位分隔符（如果需要用逗号作为分隔符，把代码里的.换成,即可）
• 给输入框加上type="text"，避免浏览器自带的数字输入框干扰自定义格式显示。

如果你的.totalprc确实用了第三方掩码插件，建议先禁用插件的自动格式化，或者按照插件文档的要求来设置赋值方式，确保和手动格式化逻辑兼容。

内容的提问来源于stack exchange，提问作者Imran S.