Suppose you have the following radio controls:
1: <input name="Book" type="radio" value="asp" checked="true">ASP .NET</input><br />
2: <input name="Book" type="radio" value="wcf" >Windows Presentation Foundation</input><br />
3: <input name="Book" type="radio" value="slg" >Silverlight 2.0</input><br />
How do you get the selected value via JavaScript?
As you can see in the example, radio controls are declared in a particular way, there are no ids, instead there are names that identifies related radios.
You should be aware that Book is not treated as an unique control by the browser's engine, because each radio control correspond to one different element in the page.
The getElementsByName method
This method allows you to obtain a collection of controls from the (X)HTML DOM, by specifying the common name value.
Now we can write the following code to get or set the checked value:
1: function getRadio(name) {
2: var radios = document.getElementsByName(name);
3:
4: for (var i = 0; i < radios.length; i++) {
5: if (radios[i].checked) {
6: return radios[i].value;
7: }
8: }
9:
10: return null;
11: }
12:
13: function setRadio(name, val) {
14: var radios = document.getElementsByName(name);
15:
16: for (var i = 0; i < radios.length; i++) {
17: radios[i].checked = (radios[i].value == val);
18: }
19: }