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

Question

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

Answer 1

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.

Answer 2

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

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

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

1. forEach to add click event listener for each radio node

2. 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>