How do I get the text of a radio button (not the v

I know I can get the "value" attribute of a radiobutton but I'm finding it strangely difficult to get the text of the radiobutton.

Consider the example below. It has 3 radiobuttons and tries to alert the value of the first radio button, which is "red" and then trys to alert the text of the radiobutton, "apple" but that fails.

Getting the text of almost any element can be done with elem.childNodes[0].nodeValue. Why doesn't it work for radiobuttons?

<!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

4条回答

淡お忘

2楼-- · 2019-02-27 04:48

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

0人赞添加讨论(0) 举报

forever°为你锁心

3楼-- · 2019-02-27 04:52

I added this answer because previously there was no full solution to the question.
Below code uses two prototype functions from the Array object:

forEach to add click event listener for each radio node
filter to retrieve checked radio node

as the RadioNodeList does not have those functionalities build-in.

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>

0人赞添加讨论(0) 举报

Summer. ? 凉城

4楼-- · 2019-02-27 04:56

It doesn't work because there is no such thing as text inside an <input> like that -- that's illegal in XHTML. It must be:

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

Then you can look for the text inside the <label>.

0人赞添加讨论(0) 举报

叼着烟拽天下

5楼-- · 2019-02-27 04:59

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

The replace is to get rid of the newline (may be different on different OSes, I am running Windows) character which is there for some reason.

0人赞添加讨论(0) 举报

How do I get the text of a radio button (not the v

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间