为何JavaScript中使用.checked属性无法正常工作？

• 确认代码执行时机
  要是你的JS代码在DOM还没完全加载时就运行了（比如放在<head>标签里），这时候获取到的复选框还没完成渲染，checked属性默认是false，自然不会触发弹窗。
  解决办法：

  • 把JS代码移到<body>标签末尾，保证DOM加载完成后再执行；
  • 或者用DOM加载完成的事件包裹代码：

    document.addEventListener('DOMContentLoaded', function() {
        var lower = document.querySelector("#lower");
        // 后续判断逻辑写在这里
    });
    

• 给复选框绑定状态变化事件
  你现在的代码只在页面加载时执行一次判断，用户勾选复选框后不会重新触发检查逻辑。得给复选框绑定change或click事件，在状态改变时再判断checked值：

  document.addEventListener('DOMContentLoaded', function() {
      var lower = document.querySelector("#lower");
      lower.addEventListener('change', function() {
          if (this.checked) {
              alert('CHECKED!');
          }
      });
  });
  

• 验证元素是否正确获取
  可以先打印获取到的元素，确认没拿到null：

  var lower = document.querySelector("#lower");
  console.log(lower); // 如果输出null，说明选择器有问题，检查id是否正确
  

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