In this article I will explain with an example, how to validate Group of CheckBoxes (Multiple CheckBoxes) using jQuery.
When the Submit Button is clicked, all the CheckBoxes in the Group will be referenced and using FOR loop, it will be validated that at-least one CheckBox is checked from the Group of CheckBoxes using jQuery.
HTML Markup
The HTML Markup consist of an HTML Table with a Group of CheckBoxes 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="checkbox" value="1" /></td>
<td>Mango</td>
</tr>
<tr>
<td><input type="checkbox" value="2" /></td>
<td>Apple</td>
</tr>
<tr>
<td><input type="checkbox" value="3" /></td>
<td>Banana</td>
</tr>
<tr>
<td><input type="checkbox" value="4" /></td>
<td>Grapes</td>
</tr>
<tr>
<td><input type="checkbox" value="5" /></td>
<td>Orange</td>
</tr>
</table>
<br />
<span id="spnError" class="error" style="display: none">Please select at-least one Fruit.</span>
<br />
<input type="button" value="Submit" id = "btnSubmit" />
jQuery script to validate Group of CheckBoxes (Multiple CheckBoxes)
Inside the jQuery document ready event handler, the Submit Button has been assigned a jQuery Click event handler.
When the Submit Button is clicked, the count of the checked CheckBoxes from the Group of CheckBoxes is determined.
If at-least one CheckBox 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 () {
//Reference the Group of CheckBoxes and verify whether at-least one CheckBox is checked.
var checked = $("#tblFruits input[type=checkbox]:checked").length;
//Set the Valid Flag to True if at-least one CheckBox is checked.
var isValid = checked > 0;
//Display error message if no CheckBox is checked.
$("#spnError")[0].style.display = isValid ? "none" : "block";
});
});
</script>
Screenshot
![Validate Group of CheckBoxes (Multiple CheckBoxes) 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
