如何获取<div id="myDiv">内选中的复选框？解决c.checked未定义问题

嘿，这个问题我之前也碰到过！大概率是你遍历的时候不小心拿到了非复选框的节点，比如<br/>或者文本节点（比如换行、空格），这些节点根本没有checked属性，所以自然会返回undefined。给你几个靠谱的解决办法：

方法一：直接筛选出选中的复选框（最简洁） #

不用遍历所有元素，直接用querySelectorAll精准定位目标，一步到位：

// 选中myDiv下所有已勾选的复选框
const checkedCheckboxes = document.querySelectorAll('#myDiv input[type="checkbox"]:checked');

// 遍历执行操作
checkedCheckboxes.forEach(checkbox => {
  // 这里写你的操作逻辑，比如打印复选框的值
  console.log('选中的复选框值：', checkbox.value);
});

方法二：遍历元素时先过滤非复选框节点 #

如果一定要遍历myDiv下的所有元素，记得先判断节点类型和元素类型，只处理真正的复选框：

const myDiv = document.getElementById('myDiv');
// 用children只获取子元素节点（排除文本节点、注释等）
const childElements = myDiv.children;

for (let i = 0; i < childElements.length; i++) {
  const element = childElements[i];
  // 先判断是不是input复选框
  if (element.tagName === 'INPUT' && element.type === 'checkbox') {
    // 再检查是否选中
    if (element.checked) {
      // 执行你的操作
      console.log('选中的复选框：', element);
    }
  }
}

为什么之前会出现undefined？ #

如果你用了childNodes遍历，它会包含所有子节点，包括文本节点（比如标签之间的换行、空格）、<br/>这些元素，这些节点没有checked属性，所以访问c.checked就会得到undefined。而children只会返回元素节点，能帮你避开这个坑。

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