获取复选框标签

Question

我在这里尝试获取选中项目的名称。例如，我想获取名称 Milk 并显示它。

这是代码：

var ckboxes=document.getElementsByClassName("ckbox");
  for(i=0;i<ckboxes.length;i++){
  if(ckboxes[i].checked==true){
    values=ckboxes[i].value;
    console.log(values);
  }
}

<html>
  <body>
    <label><input type="checkbox" value="" class="ckbox">Milk</label>
  </body>
</html>

Answer 1

你可以获得next sibling node

ckboxes[i].nextSibling.nodeValue

演示

var ckboxes = document.getElementsByClassName("ckbox");
for (i = 0; i < ckboxes.length; i++) {
  values = ckboxes[i].value;
  console.log(ckboxes[i].nextSibling.nodeValue);
}

<label><input type="checkbox" value="" class="ckbox">Milk</label>

但是，如果您的代码将在 label 内和 input 之后包含 line-breaks，请使用@teemu 的建议

ckboxes[i].parentElement.textContent;

Answer 2

Milk 不是 checkbox 的一部分。它是 label 的一部分。此外，您不应该访问 value 而应该访问 textContent:

var ckboxes=document.getElementsByClassName("ckbox");
for(i=0;i<ckboxes.length;i++){
  if(ckboxes[i].checked==true){
    var values=ckboxes[i].parentNode.textContent;
    console.log(values);
  }
}

<label><input type="checkbox" value="" checked class="ckbox">Milk</label>

获取复选框标签

Getting checkbox label

html

javascript

dom

getelementsbyclassname