复选框勾选后无法显示图片问题求助

• 核心错误：变量名不匹配
  你在代码中通过document.getElementById("www")获取了图片元素并赋值给img变量，但后续控制显示状态时错误使用了未定义的text变量，导致图片的显示逻辑完全没有执行。

修正后的完整代码 #

<form>
    White
    <input id="white" type="checkbox" onclick="checkMe()"/>
    <img id="www" style="display: none;" src="assets/2.jfif" alt="shirt">
</form>
<script>
function checkMe(){
    var cb = document.getElementById("white");
    var img = document.getElementById("www");
    if(cb.checked === true){
        img.style.display = "block";
    } else {
        img.style.display = "none";
    }
}
</script>

可选优化建议 #

• 简化判断逻辑，用三元运算符一行搞定：

  img.style.display = cb.checked ? 'block' : 'none';
  

• 推荐使用addEventListener绑定事件，代替内联onclick，让HTML和JS逻辑分离：

  <form>
      White
      <input id="white" type="checkbox"/>
      <img id="www" style="display: none;" src="assets/2.jfif" alt="shirt">
  </form>
  <script>
  const cb = document.getElementById("white");
  const img = document.getElementById("www");
  
  cb.addEventListener('change', function() {
      img.style.display = this.checked ? 'block' : 'none';
  });
  </script>
  

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