How to get checkbox selected value in jquery
In this tutorial, we will discuss How to get the checkbox selected value in jquery. client requires multiple checkbox values to get in jquery. so we will discuss the Get checkbox selected value in jquery. We get checkbox-checked values in an array or string in jquery. So I have added the below ready code for you so, you can copy and paste this code and get direct output.
Example
<html>
<head>
<title>How to get checkbox selected value in jquery - devnote.in </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 rgb(255, 166, 0); margin-top: 20px; padding: 20px;">
<h3 class="text-center">How to get checkbox selected value in jquery - devnote.in</h3>
<div style="margin-left: 300px;">
<input type="checkbox" id="laravel" value="Laravel"/> <label for="laravel">Laravel</label><br>
<input type="checkbox" id="php" value="PHP"/> <label for="php">PHP</label> <br>
<input type="checkbox" id="jquery" value="jQuery"/> <label for="jquery">jQuery</label><br>
<input type="checkbox" id="bootstrap" value="Bootstrap"/> <label for="bootstrap">bootstrap</label> <br>
<input type="checkbox" id="wordpress" value="WordPress"/> <label for="wordpress">WordPress</label> <br><br>
<input type="button" id="submit_btn" value="Submit" class="btn" />
</div>
<div id="display_data"></div>
</div>
</body>
<script type="text/javascript">
$(function () {
$("#submit_btn").click(function () {
var selected = new Array();
$("input[type=checkbox]:checked").each(function () {
selected.push(this.value);
});
if (selected.length > 0) {
$('#display_data').text("Selected value : " + selected.join(","));
}
});
});
</script>
</html>
