复选框值累加异常:代码执行字符串拼接而非数值相加
解决复选框浮点数值累加变成字符串拼接的问题
嘿,我一眼就瞅出问题所在啦!你代码里的核心问题是**total的初始值类型错误**——你把它设成了字符串"0.00",导致后续所有的+=操作都是在做字符串拼接,而不是数值相加,这就是结果变成1.002.003.00的原因~
错误原因拆解
- 初始时
total = "0.00"是字符串类型,JS里字符串和数值做+=时,会自动把数值转成字符串再拼接; - 你在循环里用了
.toFixed(2),这个方法返回的也是字符串,进一步强化了拼接行为。
修正后的代码方案
我们只需要调整total的初始类型,先做纯数值累加,最后再格式化输出即可:
$(document).ready(function() { function updateSum() { // 把total初始化为数值0,而非字符串 var total = 0; $(".sum:checked").each(function(i, n) { // 直接累加浮点数值,暂不做字符串格式化 total += parseFloat($(n).val()); }) // 最后统一将结果格式化为两位小数的字符串再赋值 $("#total").val(total.toFixed(2)); } // 监听复选框变化和页面初始化时更新求和结果 $("input.sum").change(updateSum); updateSum(); })
验证效果
当你勾选值为1.00、2.00、3.00的复选框时,total会先累加得到数值6,最后通过.toFixed(2)转成字符串"6.00",完美符合你的预期~
内容的提问来源于stack exchange,提问作者willerson
相关产品推荐
相关产品推荐

