[ACCEPTED]-How do I get the text of a radio button (not the value)-input

Accepted answer
Score: 12

It doesn't work because there is no such 3 thing as text inside an <input> like that -- that's 2 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 1 look for the text inside the <label>.

Score: 4
elem.nextSibling.nodeValue.replace('\n', '')

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

Score: 1
<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

Score: 0

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

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

  2. filter to retrieve checked 2 radio node

as the RadioNodeList does not 1 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>

More Related questions