In this article I will explain with an example, how to check if multiple CheckBoxes are checked or not using JavaScript.
When the Check Button is clicked, the CheckBoxes will be referenced and using a loop, 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.
There is also an HTML Button which has been assigned an OnClick event handler.
<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" value = "Check" onclick = "return Validate()" />
JavaScript function to check if multiple CheckBoxes are checked or not
When the Check Button is clicked, the Validate function gets called. Inside the Validate function, first the HTML Table is referenced and then all the CheckBoxes inside it are referenced.
Then using a loop, 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">
function Validate() {
var checked = 0;
//Reference the Table.
var tblFruits = document.getElementById("tblFruits");
//Reference all the CheckBoxes in Table.
var chks = tblFruits.getElementsByTagName("INPUT");
//Loop and count the number of checked CheckBoxes.
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
checked++;
}
}
if (checked > 0) {
alert(checked + " CheckBoxe(s) are checked.");
return true;
} else {
alert("Please select CheckBoxe(s).");
return false;
}
};
</script>
Screenshot
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads