我如何获得一个单选按钮（不是值）的文本(How do I get the text of a rad

我知道我能得到一个单选按钮的“值”属性，但我发现它奇怪很难得到单选按钮的文本。

考虑下面的例子。它有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>

Answer 1:

这是行不通的，因为作为一个文本里面没有这样的事情<input>这样的-在XHTML是非法的。肯定是：

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

然后你可以看看里面的文字<label> 。

Answer 2:

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

替换为摆脱换行符（可能在不同的操作系统，我运行Windows不同）字符是有某种原因。

Answer 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. 
});

Answer 4:

我说这个答案，因为以前没有完全解决的问题。
下面的代码使用从阵列物体的两个原型的功能：

forEach添加点击事件监听器为每个无线节点
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>

文章来源: How do I get the text of a radio button (not the value)