In this post we will see how to get selected checkbox value from checkbox list in jquery, here we will get multiple selected checkbox value using checkbox jquery example, If you have multiple checkbox in table rows at that time we get checked checkbox value in array or string in jquery.
In this example i have added some jquery code , html checkbox and bootstrape cdn and jquery link, so.let's see how to get multiple checkbox value in jquery.
<html>
<head>
<title> Get selected checkbox value from checkboxlist using jquery - techsolutionstuff.com
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="container" style="border:1px solid gray; margin-top: 20px;">
<h3 class="text-center">Get selected checkbox value from checkboxlist using jquery - techsolutionstuff.com </h3>
<div style="margin-left: 210px;">
<input type="checkbox" id="id1" value="PHP"/> <label>PHP</label> <br>
<input type="checkbox" id="id2" value="jQuery"/> <label>jQuery</label> <br>
<input type="checkbox" id="id3" value="CSS"/> <label>CSS</label> <br>
<input type="checkbox" id="id4" value="Bootstrap"/> <label>Bootstrap</label> <br>
<input type="checkbox" id="id5" value="Laravel"/> <label>Laravel</label> <br><br>
<input type="button" id="btn" value="Submit" class="btn btn-primary" style="margin-bottom: 20px;" />
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
var selected = new Array();
$("input[type=checkbox]:checked").each(function () {
selected.push(this.value);
});
if (selected.length > 0) {
alert("Selected items: " + selected.join(","));
}
});
});
</script>
</html>
You May Also Like :