In this article I will explain with an example, how to validate RadioButton i.e checked or unchecked using jQuery.
When the Submit Button is clicked, all the RadioButtons in the Group will be referenced, it will be validated that one RadioButton is checked from the Group of RadioButtons using jQuery.
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.
<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" id = "btnSubmit" value="Submit"/>
jQuery script to validate Radio Button
Inside the jQuery document ready event handler, the Submit Button has been assigned a jQuery Click event handler.
When Submit Button is clicked, a check is performed whether one RadioButton is checked.
If one RadioButtons is checked, then the validation is successful else an error message is displayed using JavaScript.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSubmit").click(function () {
//Set the Valid Flag to True if one RadioButton from the Group of RadioButtons is checked.
var isValid = $("input[name=Fruit]").is(":checked");
//Display error message if no RadioButton is checked.
$("#spnError")[0].style.display = isValid ? "none" : "block";
});
});
</script>
Screenshot
![Validate Radio Button using jQuery]()
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
