jQuery自定义Wpform复选框价格计算器返回NaN问题排查

错误原因 #

你从.wpforms-payment-total元素读取的文本包含$符号、空白字符和换行符，parseInt无法解析以非数字开头的字符串，会直接返回NaN，导致后续计算结果异常。

修复后完整JS代码 #

jQuery(document).ready(function() {
  // 提取原始价格时过滤所有非数字/小数点的字符
  const rawPrice = $('.wpforms-payment-total').text().replace(/[^\d.]/g, '');
  const basePrice = parseFloat(rawPrice);

  jQuery('input[name="myBox2"]').on('click', function() {
    const finalPrice = jQuery(this).is(':checked') ? basePrice * 1.15 : basePrice;
    // 如需最终价格带$符号，可改为 .text('$' + finalPrice.toFixed(2))
    jQuery('#totalfinal').text(finalPrice.toFixed(2));
  });
});

核心修改说明 #

• 用正则/[^\d.]/g过滤掉价格文本中的所有非数值相关字符，确保可以正常解析出数字
• 提前读取一次原始价格缓存，不用每次点击复选框都重复读取DOM，性能更优
• 使用parseFloat替代parseInt，兼容原始价格存在小数的场景

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