In this article I will explain with an example, how to validate Group of RadioButtons (Multiple RadioButtons) using JavaScript.
When the Submit Button is clicked, all the RadioButtons in the Group will be referenced and using FOR loop, it will be validated that one RadioButton must be checked from the Group of RadioButtons using JavaScript.
HTML Markup
The HTML Markup consist of an HTML Table with a Group of RadioButtons to be validated, an HTML SPAN for displaying the error message and a HTML Button.
The HTML Button has been assigned a JavaScript OnClick event handler.
<table id = "tblFruits" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><input type="radio" name = "Fruit" value="1" /></td>
<td>Mango</td>
</tr>
<tr>
<td><input type="radio" name = "Fruit" value="2" /></td>
<td>Apple</td>
</tr>
<tr>
<td><input type="radio" name = "Fruit" value="3" /></td>
<td>Banana</td>
</tr>
<tr>
<td><input type="radio" name = "Fruit" value="4" /></td>
<td>Grapes</td>
</tr>
<tr>
<td><input type="radio" name = "Fruit" value="5" /></td>
<td>Orange</td>
</tr>
</table>
<br />
<span id="spnError" class="error" style="display: none">Please select a Fruit.</span>
<br />
<input type="button" value="Submit" onclick="return Validate()" />
JavaScript function to validate Group of RadioButtons (Multiple RadioButtons)
When the Submit Button is clicked, all the RadioButtons inside the Table are referenced using the Name property.
Then using FOR loop, each RadioButton is verified whether it is checked.
If one RadioButton is checked, then the validation is successful else an error message is displayed using JavaScript.
<script type="text/javascript">
function Validate() {
//Reference the Group of RadioButtons.
var radio = document.getElementsByName("Fruit");
//Set the Valid Flag to False initially.
var isValid = false;
//Loop and verify whether at-least one RadioButton is checked.
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
isValid = true;
break;
}
}
//Display error message if no RadioButton is checked.
document.getElementById("spnError").style.display = isValid ? "none" : "block";
return isValid;
}
</script>
Screenshot
![Validate Group of RadioButtons (Multiple RadioButtons) using JavaScript]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
