勾选/取消勾选Checkbox时JS函数异常：取消勾选后文本不显示

我尝试实现勾选Checkbox时显示图片，取消勾选时显示文本的功能。目前勾选时能正常显示图片，但取消勾选时文本无法显示。

相关HTML代码 #

<input type="checkbox" id="checkword" onchange="tran()">
<label for="checkword" class="word" id="word"></label>

相关JS代码 #

let wordel = document.getElementById('word');
wordel.innerHTML = "A";
function tran() {
    if(wordel.checked != false){
        wordel.innerHTML = "";
        wordel.innerHTML = '<img src="001.gif">';
        wordel.style.padding = "0px";
        wordel.style.background = "none";
    } else {
        wordel.innerHTML = "A";
    }
}

问题原因 #

核心错误是**wordel是label元素，它没有checked属性**，你误把label当成了checkbox来判断勾选状态。wordel.checked的值是undefined，undefined != false的判断结果始终为true，导致取消勾选时永远不会进入else分支显示文本。

修正后的代码 #

修改后的JS代码

const checkbox = document.getElementById('checkword');
const wordel = document.getElementById('word');
wordel.innerHTML = "A";

function tran() {
    if(checkbox.checked){
        wordel.innerHTML = '<img src="001.gif">';
        wordel.style.padding = "0px";
        wordel.style.background = "none";
    } else {
        wordel.innerHTML = "A";
    }
}

说明

1. 新增获取checkbox元素的代码，通过它的checked属性判断当前勾选状态
2. 简化判断条件，直接使用checkbox.checked替代冗余的!= false
3. 移除多余的wordel.innerHTML = "";，后续赋值会直接覆盖原有内容

修改后，勾选Checkbox时显示图片，取消勾选时就能正常显示文本"A"了。

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