【问题标题】：js get radio label textjs获取单选标签文本
【发布时间】：2011-06-04 03:02:18
【问题描述】：

我有这个代码：

<input type=radio name="vote_x" value="5">
    <label for="vote_x">blabla</label><br>

如何获取 id 为 vote_x [使用 JS] 的收音机的标签值？？

谢谢

【问题讨论】：

这是直接的 JS 还是 jQuery？

标签： javascript

【解决方案1】：

如果你像这样在标签上放一个 id

<input type="radio" name="vote_x" value="5">
<label id="for_vote_x" for="vote_x">blabla</label>

然后你可以使用

var textinlabel = document.getElementById("for_vote_x").innerHTML;

已编辑：不使用标签元素的 id

var labelElements = document.getElementsByTagName("label");
for (var i = 0, var labelElement; labelElements[i]; i++) {
  if (labelElement.getAttribute("for") == "vote_x") {
    //this is the labelElement you want
    //code goes here
  }
}

理想情况下，您希望为此创建一个通用函数

function getlabelforinput(inputname) {
    var labelElements = document.getElementsByTagName("label");
    for (var i = 0, var labelElement; labelElements[i]; i++) {
      if (labelElement.getAttribute("for") == inputname) {
        return labelElement
      }
    }
    return null;
}

【讨论】：

任何无需为标签创建 ID 的解决方法？
@Ronan Dejhero.... 我添加了一个不同的解决方案，如果您将标签放在输入元素之前或之后，它将起作用。
无论如何要获得单选按钮的选定标签？

【解决方案2】：

你可以试试这个

var el = document.getElementById("vote_x");
while(el.nextSibling && !(/label/i.test(el.nextSibling.tagName))){
    el = el.nextSibling;
}
var text = el.nextSibling.innerHTML

你可以在这个fiddle查看。

【讨论】：

我想这会起作用，但也许标签不能保证是下一个兄弟？
循环将处理输入元素和标签之间可能出现的文本节点。如果位置不固定，那么@John 的解决方案 (stackoverflow.com/questions/4606300/js-get-radio-label-text/…) 将是最好的解决方案。

【解决方案3】：

现代答案

使用document.querySelector('label[for="INPUT_ID"]')获取给定id输入对应的标签元素。

例子：

const label = document.querySelector('label[for="vote_x"]');
console.log(label.textContent.trim());

<input type=radio name="vote_x" value="5">

<label for="vote_x">blabla</label>

【讨论】：