How to find the value of a radio button with pure javascript?

Question

<input checked=checked type="radio" name="colors" value="red" />Red
<input type="radio" name="colors" value="green" />Green
<input type="radio" name="colors" value="blue" />Blue

Given the above, I set the red button to be selected by default (so I give it the checked=checked attribute. With this, if I ever call .checked on that input element, it will always return true, even if another option is selected.

In plain javascript (no jQuery), how can you get the actual selected option?

Answer 1

Try this:

var options = document.getElementsByName("colors");
if (options) {
    for (var i = 0; i < options.length; i++) {
        if (options[i].checked){
             alert(options[i].value);
        }
    }
}

Would be so much easier with jQuery though... just saying.

Answer 2

I believe you will find it in the document.all collection:

var selectedColor = document.all["colors"];

Answer 3

plain javasript:

document.querySelector('input[name=colors]:checked').value;