点击复选框显示图片触发Uncaught TypeError错误，求修复方案

嘿，这个错误我太熟了！本质就是你代码里找的那个叫checkIDGrid的复选框，要么是代码跑的时候它还没被浏览器加载出来，要么就是你ID拼写错了，导致document.getElementById拿不到元素，返回了null，再去读checked属性自然就报错啦。

给你几个具体的修复办法，照着改就行：

1. 等页面加载完再执行代码 #

如果你的JS代码是放在页面<head>里的，那浏览器还没渲染出复选框呢，代码就先跑了，肯定找不到元素。把代码套进jQuery的$(document).ready()里，确保页面所有元素都加载完再执行：

$(document).ready(function() {
  // 给复选框绑定点击事件
  $('#checkIDGrid').on('click', function() {
    if (this.checked) { // 直接用this指代当前点击的复选框，靠谱得很
      alert("I am checked for the grid");
      var img = $('<img />', { 
        id: 'Myid', 
        src: 'https://thumbs.dreamstime.com/z/pixel-perfect-...' 
      });
      // 别忘了把图片加到页面里哦，比如加到body里
      $('body').append(img);
    } else {
      // 可选：取消勾选的时候把图片删掉
      $('#Myid').remove();
    }
  });
});

2. 检查复选框的ID是不是写错了 #

赶紧去看你的HTML代码，确保真的有个ID是checkIDGrid的复选框，比如：

<input type="checkbox" id="checkIDGrid" /> 点击显示图片

要是ID拼写错了（比如大小写不对、少了个字母），那JS肯定找不到它，返回null就会报错，一定要保证JS里的ID和HTML里的完全一模一样。

3. 用jQuery的方法简化判断（可选优化） #

不想直接操作DOM属性的话，用jQuery的is(':checked')方法判断状态更简洁：

if ($('#checkIDGrid').is(':checked')) {
  // 执行显示图片的逻辑
}

对了，你原来的代码只创建了图片元素，但没把它添加到页面里，就算没报错，图片也不会显示出来，记得加上append()这类方法把图片插到DOM里哦！

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