In this article I will explain with an example, how to get multiple selected (checked) CheckBox values in Array using jQuery.
When the Get Button is clicked, the CheckBoxes will be referenced and if the CheckBox is selected (checked) then its value will be inserted into an Array.
Finally, the values of the selected (checked) CheckBoxes inside the Array will be 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 = "btnGet" value = "Get" />
Get multiple selected (checked) CheckBox values in Array using jQuery
Inside the jQuery document ready event handler, the Get Button has been assigned a Click event handler.
Inside the Click event handler, the CheckBoxes will be referenced and if the CheckBox is selected (checked) then its value will be inserted into an Array.
Finally, the values of the selected (checked) CheckBoxes inside the Array will be 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 () {
$("#btnGet").click(function () {
//Create an Array.
var selected = new Array();
//Reference the CheckBoxes and insert the checked CheckBox value in Array.
$("#tblFruits input[type=checkbox]:checked").each(function () {
selected.push(this.value);
});
//Display the selected CheckBox values.
if (selected.length > 0) {
alert("Selected values: " + selected.join(","));
}
});
});
</script>
Screenshot
![Get multiple selected (checked) CheckBox values in Array using jQuery]()
Demo
Downloads
