点击按钮打开选中复选框链接报错：Cannot read properties of null (reading 'checked')

报错原因分析 #

控制台报错：无法读取null的属性'checked'，根源有两处：

• 方法使用错误：closest()用于查找当前元素或其祖先元素中匹配选择器的节点，但复选框是.select-popup-divs的子元素而非祖先，因此div.closest('.css-checkbox')返回null，后续读取checked属性触发报错。
• 拼写错误：indow.open漏写字母w，正确写法为window.open。

修复后的JavaScript代码 #

const fixedButton = document.querySelector('#fixed-open-id');

fixedButton.addEventListener('click', () => {
  // 直接选中所有目标复选框，逻辑更简洁高效
  const checkboxes = document.querySelectorAll('.css-checkbox');
  
  checkboxes.forEach((checkbox) => {
    if (checkbox.checked) {
      window.open(checkbox.dataset.url);
    }
  });
});

可选优化方案（基于容器遍历） #

如果需要严格基于.select-popup-divs容器查找复选框，可修改为：

const fixedButton = document.querySelector('#fixed-open-id');

fixedButton.addEventListener('click', () => {
  const allDivs = document.querySelectorAll('.select-popup-divs');
  
  allDivs.forEach((div) => {
    // 用querySelector查找容器内的复选框
    const checkbox = div.querySelector('.css-checkbox');
    // 先判断元素是否存在，避免潜在异常
    if (checkbox && checkbox.checked) {
      window.open(checkbox.dataset.url);
    }
  });
});

内容的提问来源于stack exchange，提问作者over-heaven