如何获取单选按钮的文本（不是值）答案

【问题标题】：How do I get the text of a radio button (not the value)如何获取单选按钮的文本（不是值）
【发布时间】：2009-08-20 20:09:04
【问题描述】：

我知道我可以获取单选按钮的“值”属性，但我发现获取单选按钮的文本非常困难。

考虑下面的例子。它有 3 个单选按钮并尝试提醒第一个单选按钮的值，即“红色”，然后尝试提醒单选按钮的文本“苹果”，但失败了。

使用 elem.childNodes[0].nodeValue 可以获取几乎任何元素的文本。为什么它不适用于单选按钮？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Radio Buttons</title>
<style type="text/css">
</style>
<script type="text/javascript">
function start(){
  var rblist = document.getElementsByName("colors");
  var elem = rblist[0];
  alert(elem.value); // PRINTS "RED"
  alert(elem.childNodes[0].nodeValue); //THROWS ERROR
}
</script>       
</head>
<body onload="start();">
<input type="radio" name="colors" value="red" checked>apple</input>
<input type="radio" name="colors" value="blue">sky</input>
<input type="radio" name="colors" value="green">grass</input>
</body>  
</html>

【问题讨论】：

标签： javascript dom input

【解决方案1】：

它不起作用，因为在 <input> 中没有文本这样的东西——这在 XHTML 中是非法的。必须是：

<input type="radio" name="colors" value="red" id="radio1" checked="checked" /><label for="radio1">apple</label>

然后你就可以在<label>里面找文字了。

【讨论】：

+1 - 今天我第二次看到有人在<input> 元素中输入文字，很有趣
+1 - 我承认我什至不知道这是可能的。 ;) 我第一次看到这样的东西。尽管如此，无论如何都可以检索该值（请参阅我的答案）。

【解决方案2】：

elem.nextSibling.nodeValue.replace('\n', '')

替换是为了摆脱由于某种原因而存在的换行符（在不同的操作系统上可能不同，我运行的是 Windows）。

【讨论】：

【解决方案3】：

<form id="myForm">
  <ul>
      <li><input type="radio" name="colors" value="red">apple</li>
      <li><input type="radio" name="colors" value="blue">sky</li>
      <li><input type="radio" name="colors" value="green">grass</li>
  </ul>
</form>

<script> 
(function(){
    var form = document.getElementById("myForm");

    var colorFields = form.elements["colors"];

   alert(colorFields[0].nextSibling.data); //alerts the text apple not the value red. 
});

【讨论】：

【解决方案4】：

我添加了这个答案，因为以前没有完整的问题解决方案。
下面的代码使用了 Array 对象的两个原型函数：

forEach为每个radio节点添加点击事件监听
filter 检索已检查的无线电节点

因为 RadioNodeList 没有内置这些功能。

var rblist = document.getElementsByName("colors");;

[].forEach.call(rblist, function(e) {
  e.addEventListener('click', showText, false)
});

function showText() {
  var rb = [].filter.call(rblist, function(e) {
    return e.checked;
  })[0];
  console.log(rb.nextElementSibling.innerText);
};

<input type="radio" name="colors" value="red" /><label>apple</label>
<input type="radio" name="colors" value="blue" /><label>sky</label>
<input type="radio" name="colors" value="green" /><label>grass</label>

【讨论】：