In this tutorial we will explain how to get selected Checkboxes value Using jQuery. First user need to select one or more checkbox field in a form then we will get all value of checkbox in an array.
The jQuery :checked selector can be used with the each() method to retrieve the values of all checkboxes selected in group. jQuery.each() method used here simply iterates over all the checkboxes that are checked.
Live Demo
First include the jQuery library file before the closing </head> tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Creating HTML Form with Checkboxes
This HTML shows a form containing a list of colors with checkbox field.
<form method="POST">
<h3>Select your favorite colors:</h3>
<div class="checkbox"><label><input type="checkbox" value="red" name="color"> Red</label></div>
<div class="checkbox"><label><input type="checkbox" value="orange" name="color"> Orange</label></div>
<div class="checkbox"><label><input type="checkbox" value="yellow" name="color"> Yellow</label></div>
<div class="checkbox"><label><input type="checkbox" value="green" name="color"> Green</label></div>
<div class="checkbox"><label><input type="checkbox" value="blue" name="color"> Blue</label></div>
<div class="checkbox"><label><input type="checkbox" value="purple" name="color"> Purple</label></div>
<br>
<button type="button" class="btn btn-primary">Get Values</button>
</form>
Get Selected Checkboxes Value Using jQuery
Then we write jQuery script to get selected checkbox value in an array using jQuery each(). Using this jQuery function it runs a loop to get the checked value and put it into an array.
<script type="text/javascript">
$(document).ready(function() {
$(".btn").click(function() {
var colors = [];
$.each($("input[name='color']:checked"), function() {
colors.push($(this).val());
});
alert("My favourite colors are: " + colors.join(", "));
});
});
</script>
Index.html
In this file we contains complete code with jQuery library, jQuery script and HTML form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Selected Checkboxes Value Using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".btn").click(function() {
var colors = [];
$.each($("input[name='color']:checked"), function() {
colors.push($(this).val());
});
alert("My favourite colors are: " + colors.join(", "));
});
});
</script>
</head>
<body>
<form method="POST">
<h3>Select your favorite colors:</h3>
<div class="checkbox"><label><input type="checkbox" value="red" name="color"> Red</label></div>
<div class="checkbox"><label><input type="checkbox" value="orange" name="color"> Orange</label></div>
<div class="checkbox"><label><input type="checkbox" value="yellow" name="color"> Yellow</label></div>
<div class="checkbox"><label><input type="checkbox" value="green" name="color"> Green</label></div>
<div class="checkbox"><label><input type="checkbox" value="blue" name="color"> Blue</label></div>
<div class="checkbox"><label><input type="checkbox" value="purple" name="color"> Purple</label></div>
<br>
<button type="button" class="btn">Get Values</button>
</form>
</body>
</html>