jQuery实现复选框状态改变更新值时，计算total为NaN如何解决？

问题根因 #

• 初始代码逻辑分支重复：if和else if的判断条件都是status == "redbricks"，只要第一个if条件成立，else if永远不会执行，自然不会触发对应的计算逻辑。
• 逻辑运算符使用错误：调整后的代码用了按位与运算符&替代了逻辑与运算符&&，会导致判断结果不符合预期。
• 表单值读取逻辑错误：直接调用$(".package-select").val()只会读取页面第一个符合类名的单选框值，不会读取当前选中的单选框值，判断条件永远拿不到正确的选项值。
• 数值类型转换缺失：通过val()、attr()读取的属性值都是字符串类型，未做显式转换的情况下，如果读取结果为空、undefined时，参与乘法计算就会返回NaN。
• 未判断选中状态：直接用$(".a3:checked").attr("price")读取价格时，如果没有匹配的选中元素，返回值为undefined，参与计算后直接得到NaN。
• 数字常量错误使用字符串格式：计算逻辑中"1.2"是字符串类型，虽然乘法运算会触发隐式转换，但容易引发不可预期的类型错误，建议直接写数值类型1.2。

修复后代码 #

// 数值读取统一做显式类型转换，空值默认设为0避免NaN
const area = Number($(".area-input").val()) || 0,
  status = $(".status-select:checked").val() || "",
  // 读取当前选中的套餐值
  selectedPackage = $(".package-select:checked").val() || "";
let total = 0;

if (status === "redbricks" && selectedPackage === "1") {
  const price = Number($(".a3:checked").attr("price")) || 0;
  total = area * price + area * 200;
} else if (status === "redbricks" && selectedPackage === "2") {
  const price = Number($(".a2:checked").attr("price")) || 0;
  total = area * price;
}

// 输出计算结果即可
console.log(total);

动态更新绑定 #

如果需要实现选项变化时自动更新计算值，绑定对应表单的事件即可：

$(".package-select, .area-input, .status-select").on("change input", function() {
  // 把上面的计算逻辑放到这里即可
})

规范建议 #

自定义属性建议遵循HTML规范用data-*格式，比如把price="75"改为data-price="75"，读取时用.data("price")，兼容性和可维护性更好。

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