Jquery Get All Checked Checkbox Values in Array

11-Apr-2023

.

Admin

Hi Guys,

In this example,I will leran you how to get all checked checkbox values using jquery.you can simplay get all checked checkbox values using jquery.

If you have multiple checkbox list or in table rows then we can get all checked checkbox value in string or array in jquery.

I will give you very basic example and demo so you can see how it get selected checkbox value in jquery. we will input[type=checkbox]:checked with each loop of jquery so we can get it all checked check box and we will store it to array.

Example :


<!DOCTYPE html>

<html>

<head>

<title>Jquery Get All Checked Checkbox Values in Array - nicesnippets.com</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</head>

<body>

<table id="tblFruits">

<label><b></b>Fruits :</label>

<tr>

<td><input id="fruit1" type="checkbox" value="1"/><label for="fruit1">Apple</label></td>

</tr>

<tr>

<td><input id="fruit2" type="checkbox" value="2"/><label for="fruit2">Banana</label></td>

</tr>

<tr>

<td><input id="fruit3" type="checkbox" value="3"/><label for="fruit3">Mango</label></td>

</tr>

<tr>

<td><input id="fruit3" type="checkbox" value="4"/><label for="fruit3">Orange</label></td>

</tr>

<tr>

<td><input id="fruit4" type="checkbox" value="5"/><label for="fruit4">Cherry</label></td>

</tr>

</table>

<br />

<input type="button" id="btnClick" value="Get Value" />

</body>

<script type="text/javascript">

$(function () {

$("#btnClick").click(function () {

var selected = new Array();

$("#tblFruits input[type=checkbox]:checked").each(function () {

selected.push(this.value);

});

if (selected.length > 0) {

alert("Selected values: " + selected.join(","));

}

});

});

</script>

</html>

It will help you...

#Jquery