How to get the radio button text (not the value)
I know I can get the "value" attribute for the radio, but I am having a hard time getting the radio text.
Consider the example below. It has 3 radio lenses and tries to alert the value of the first switch, which is "red", and then tries to alert the radio object text "apple", but it fails.
Retrieving the text of almost any element can be done with elem.childNodes [0] .nodeValue. Why doesn't it work for radio amateurs?
<!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>
source to share
<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.
});
source to share
I added this answer because there was no complete solution to the question previously.
Below code uses two prototypes from Array object:
-
forEach
to add a click event listener for each radio node -
filter
to get checked radio node
as RadioNodeList does not support this functionality.
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>
source to share