In this article I will explain with an example, how to get multiple selected (checked) CheckBox values as Comma Separated String using JavaScript.
When the Get Button is clicked, the CheckBoxes will be referenced using a loop. Inside the loop 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 as Comma Separated String 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 = "Get" onclick = "GetSelected()" />
JavaScript function to get multiple selected (checked) CheckBox values as Comma Separated String
When the Get Button is clicked, the GetSelected function gets called. Inside the GetSelected function, first the HTML Table is referenced and then all the CheckBoxes inside it are referenced.
Then a loop is executed over the referenced CheckBoxes and inside the loop the value of the selected (checked) CheckBox is 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">
function GetSelected() {
//Create an Array.
var selected = new Array();
//Reference the Table.
var tblFruits = document.getElementById("tblFruits");
//Reference all the CheckBoxes in Table.
var chks = tblFruits.getElementsByTagName("INPUT");
// Loop and push the checked CheckBox value in Array.
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
selected.push(chks[i].value);
}
}
//Display the selected CheckBox values.
if (selected.length > 0) {
alert("Selected values: " + selected.join(","));
}
};
</script>
Screenshot
![Get multiple selected (checked) CheckBox values as Comma Separated String using JavaScript]()
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
