如何用jQuery实现复选框勾选与输入框显示？及BUG排查

问题根源 #

你遇到的问题很明确：当接口返回的sale_price是null时，你的判断逻辑没覆盖这种情况。原来的代码里只判断了sale_product !== ""，但null和空字符串""是完全不同的值，所以这个条件会返回true，导致代码错误地勾选复选框并显示输入框。

修复方案 #

下面是两种可行的修复方式，你可以根据习惯选择：

方案1：明确覆盖null、空字符串和0的情况

直接把所有不需要显示促销的情况都纳入else分支：

var sale_product = outputData.sale_price;
// 只有当sale_price不是null、不是空字符串，且转换为数值后大于0时，才启用促销选项
if (sale_product !== null && sale_product !== "" && parseFloat(sale_product) > 0) {
  $("#Editsale").prop("checked", true);
  $("#EditsalePrice").show();
  modal.find("input#Editsale_price").val(sale_product);
} else {
  $("#Editsale").prop("checked", false);
  $("#EditsalePrice").hide();
}

方案2：利用类型转换简化判断

因为null、空字符串在布尔判断中会被视为false，再结合数值判断，可以简化代码：

var sale_product = outputData.sale_price;
var salePriceValue = parseFloat(sale_product);
// 仅当sale_product存在且数值大于0时，显示促销相关内容
if (sale_product && salePriceValue > 0) {
  $("#Editsale").prop("checked", true);
  $("#EditsalePrice").show();
  modal.find("input#Editsale_price").val(sale_product);
} else {
  $("#Editsale").prop("checked", false);
  $("#EditsalePrice").hide();
}

原代码的问题拆解 #

• 当sale_price为null时，sale_product !== ""的结果是true（null属于null类型，空字符串是string类型，两者不相等），所以会进入第一个if分支，执行错误的操作。
• 你的else if只处理了空字符串的场景，完全漏掉了null的情况，这就是ID5出现问题的核心原因。

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