In this article I will explain with an example, how to check if multiple CheckBoxes are checked or not using jQuery.
When the Check Button is clicked, the CheckBoxes will be referenced and the Total count of the checked (selected) CheckBoxes is determined and displayed using JavaScript Alert Message Box.
HTML Markup
The following HTML Markup consists of an HTML Table with some CheckBoxes and their associated Label elements and an HTML Button.
<table id="tblFruits">
<tr>
<td><input id="chkMango" type="checkbox" value="1"/><label for="chkMango">Mango</label></td>
</tr>
<tr>
<td><input id="chkApple" type="checkbox" value="2"/><label for="chkApple">Apple</label></td>
</tr>
<tr>
<td><input id="chkBanana" type="checkbox" value="3"/><label for="chkBanana">Banana</label></td>
</tr>
<tr>
<td><input id="chkGuava" type="checkbox" value="4"/><label for="chkGuava">Guava</label></td>
</tr>
<tr>
<td><input id="chkOrange" type="checkbox" value="5"/><label for="chkOrange">Orange</label></td>
</tr>
</table>
<br />
<input type = "button" id = "btnCheck" value = "Check" />
Check if multiple CheckBoxes are checked or not using jQuery
Inside the jQuery document ready event handler, the Check Button has been assigned a Click event handler.
Inside the Click event handler, the Total count of the checked (selected) CheckBoxes is determined and displayed using JavaScript Alert Message Box.
And if none of the CheckBoxes are checked, then a message to select the CheckBoxes is displayed using JavaScript Alert Message Box.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnCheck").click(function () {
//Reference the CheckBoxes and determine Total Count of checked CheckBoxes.
var checked = $("#tblFruits input[type=checkbox]:checked").length;
if (checked > 0) {
alert(checked + " CheckBoxe(s) are checked.");
return true;
} else {
alert("Please select CheckBoxe(s).");
return false;
}
});
});
</script>
Screenshot
![Check if multiple CheckBoxes are checked or not 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
