如何使用Javascript获取选中CheckBox对应的文本？

• document.querySelectorAll('input[type=checkbox]:checked') 返回的是符合条件的节点集合，不是单个DOM节点，直接调用childNodes属性会抛出类型错误。
• <input> 是自闭合标签，本身不存在子节点，目标文本存储在<input>的父元素<label>内的第二个<span>标签中，无法通过<input>的子节点属性获取。

首先提供通用的获取所有选中复选框对应文本的函数：

function getCheckedCheckboxTexts() {
  const checkedBoxes = document.querySelectorAll('input[type=checkbox]:checked')
  const result = []
  checkedBoxes.forEach(checkbox => {
    // 定位到父级label下存储文本的span节点
    const textNode = checkbox.parentElement.querySelector('.flex-1.uppercase')
    if (textNode) {
      result.push(textNode.textContent.trim())
    }
  })
  return result
}

判断是否选中「Sesame Free」的调用示例：

// 因为文本节点加了uppercase类，实际返回的是全大写文本，匹配时注意大小写
const isSesameFreeChecked = getCheckedCheckboxTexts().includes('SESAME FREE')

如果只需要判断当前是否有选中「Sesame Free」的复选框，也可以直接用选择器匹配：

const hasSesameFreeChecked = !!document.querySelector('input[type=checkbox]:checked ~ .flex-1.uppercase')

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