Introduction
Have you ever wondered how to extract the values of the selected checkboxes from a checkboxlist using JQuery? Well, look no further! In this article, we will explore the step-by-step process of achieving this task.
Step: Create a html page
<!DOCTYPE html>
<html>
<head>
<title>Get selected checkbox value from checkboxlist in Jquery - Wizbrand</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<table id="tblPosts">
<tr>
<td><input id="post1" type="checkbox" value="1"/><label for="post1">Roshan</label></td>
</tr>
<tr>
<td><input id="post2" type="checkbox" value="2"/><label for="post2">Amit</label></td>
</tr>
<tr>
<td><input id="post3" type="checkbox" value="3"/><label for="post3">Rakesh</label></td>
</tr>
<tr>
<td><input id="post3" type="checkbox" value="4"/><label for="post3">Laravel Import Export</label></td>
</tr>
<tr>
<td><input id="post4" type="checkbox" value="5"/><label for="post4">Laravel Admin Panel</label></td>
</tr>
</table>
<br />
<input type="button" id="btnClick" value="Get" />
</body>
<script type="text/javascript">
$(function () {
$("#btnClick").click(function () {
var selected = new Array();
$("#tblPosts input[type=checkbox]:checked").each(function () {
selected.push(this.value);
});
if (selected.length > 0) {
alert("Selected values: " + selected.join(","));
}
});
});
</script>
</html>View:-
Output:-
Hopefully, It will help you …!!!