点击复选框计算总价时JavaScript函数出现NaN值的问题求助

你的代码出现NaN的核心原因是函数调用和参数接收不匹配：

• HTML里调用UpdateCost(20)时，传的是价格数字，但函数里把参数当成DOM元素来取elem.value，数字没有value属性，转成Number后就是NaN。
• 另外，函数每次初始化total为elem.value（复选框的ID），完全偏离了累加/累减价格的逻辑。

修正后的JavaScript代码 #

function UpdateCost(elem, price) {
  // 读取当前总金额，转换为数字，默认值0
  let total = Number(document.getElementById('total').value) || 0;
  
  // 根据复选框选中状态调整总金额
  if (elem.checked) {
    total += price;
  } else {
    total -= price;
  }
  
  // 更新总金额输入框，保留整数
  document.getElementById('total').value = total.toFixed(0);
}

修正后的HTML代码 #

<form>
  <input type="checkbox" value="1" onclick="UpdateCost(this, 20);" /> Price = 20
  <input type="checkbox" value="2" onclick="UpdateCost(this, 25);" /> Price = 25
  <input type="checkbox" value="3" onclick="UpdateCost(this, 30);" /> Price = 30
  <input type="checkbox" value="4" onclick="UpdateCost(this, 40);" /> Price = 40
  <input type="text" id="total" value="0">  
</form>

关键修改说明 #

1. 参数传递修正：调用函数时传入this（当前复选框DOM元素）和对应价格，这样函数既能获取选中状态，也能拿到正确的价格数值。
2. 总金额来源修正：从total输入框读取当前总金额，而不是错误地使用复选框的ID值。
3. 逻辑简化：直接根据选中状态做加法或减法，通过|| 0处理初始值或异常情况，避免不必要的NaN判断。
4. 修复笔误：第四个复选框标注价格是40，原代码传了20，已同步修正。

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