求助：如何获取选中复选框对应的标签文本内容

嘿，我来帮你搞定这个问题！你当前的代码之所以拿不到「Milk」，核心原因有两个：

• 你的复选框value属性是空的，所以ckboxes[i].value自然取不到内容
• 「Milk」是复选框所在的<label>标签里的文本内容，不是复选框自身的属性值

下面给你两种可行的解决方案，适配不同的HTML结构：

方案1：适配当前嵌套式label结构 #

你的HTML里复选框是直接嵌套在<label>里的，这种情况下可以直接通过复选框的父节点（也就是label）获取文本内容：

var ckboxes = document.getElementsByClassName("ckbox");
for (i = 0; i < ckboxes.length; i++) {
  if (ckboxes[i].checked) {
    // 获取父label的文本并去除前后多余空格
    var labelText = ckboxes[i].parentNode.textContent.trim();
    console.log(labelText); // 输出选中的标签文本，比如「Milk」
  }
}

你也可以用nextSibling直接获取复选框后面的文本节点，效果一样：

var labelText = ckboxes[i].nextSibling.textContent.trim();

方案2：适配label与checkbox分离的结构（更通用） #

如果以后你的HTML结构改成label通过for属性与复选框关联（如下），可以用这种更通用的写法：

<input type="checkbox" id="milk-checkbox" class="ckbox">
<label for="milk-checkbox">Milk</label>

对应的JavaScript代码：

var ckboxes = document.getElementsByClassName("ckbox");
for (i = 0; i < ckboxes.length; i++) {
  if (ckboxes[i].checked) {
    // 通过for属性匹配对应的label
    var targetLabel = document.querySelector(`label[for="${ckboxes[i].id}"]`);
    if (targetLabel) {
      console.log(targetLabel.textContent.trim());
    }
  }
}

这样不管是嵌套还是分离的结构，都能准确获取到标签文本啦！

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