JavaScript中Checkbox选中状态判断的逻辑问题排查

嘿，这个问题其实很常见——你不小心把布尔值和字符串搞混啦！

问题根源 #

document.getElementById('checkbox').checked返回的是一个原生布尔值（要么是true，要么是false），而不是字符串形式的'true'或'false'。

你的代码里用了if(checkbox == 'true')，这里是把布尔值true和字符串'true'做比较。在JavaScript中，使用==会触发隐式类型转换：布尔值true会被转为数字1，字符串'true'会被转为NaN，而1 == NaN的结果是false——这就是为什么哪怕checkbox选中，代码也进不了if块的原因。

修正方案 #

有两种简单的修正方式：

方式1：直接使用布尔值判断（最简洁）

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox){ // 布尔值true会直接被判定为真
    console.log('test');
}

方式2：使用严格相等运算符（更严谨，避免类型转换意外）

var checkbox = document.getElementById('checkbox').checked;
console.log(checkbox);
if(checkbox === true){ // 严格匹配布尔类型的true
    console.log('test');
}

这样修改后，当checkbox被选中时，就能正常触发console.log('test')了！

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