Question

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

考虑以下示例。它有3个radiobuttons并试图提醒第一个单选按钮的值，这是“红色”，然后试图提醒单选按钮的文本，“苹果”，但是失败了。

获取几乎所有元素的文本都可以使用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

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

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>

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

4 个答案: