如何让JavaScript计算的checkbox选中总值始终保留2位小数显示

解决方案 #

你已经验证过format(total)输出格式符合要求，只需要在给#total赋值时传入格式化后的结果即可，原代码中你直接传入了数字类型的total，浏览器会自动省略末尾无意义的小数位零。

修改后的完整代码

$('input:checkbox').change(function () {
  var total = 0;
  $('input:checkbox:checked').each(function () {
    total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
  });
  // 替换原来的赋值逻辑，传入格式化后的字符串
  $("#total").val(format(total));
});

补充说明

• 如果你没有自定义format函数，也可以直接使用JS原生的toFixed(2)方法实现保留两位小数的效果，对应赋值语句修改为：

  $("#total").val(total.toFixed(2));
  

• 如果你的checkbox的value可能存在带小数的场景，建议把parseInt替换为parseFloat，避免小数部分被截断。
• 格式化后#total的值为字符串类型，如果后续需要拿这个值做数值计算，需要先转成数字类型再操作。

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