In this tutorial we will learn how to get selected checkbox value using jQuery. Form input type checkbox have an array value because multiple checkbox can be selected. In previous tutorial we have discussed about how to get radio button checked value using jQuery. We will use jQuery selector with each method to get select checkbox value in an array.
User can select multiple checkbox in a form so we will get value of checkbox in an array. jQuery.each() method is used to loop through each element over both jQuery objects and arrays.
Let’s start.
HTML
<form method="POST"> <input type="checkbox" name="tutorial" value="PHP"><label>PHP</label> <br> <input type="checkbox" name="tutorial" value="MySQL"><label>MySQL</label> <br> <input type="checkbox" name="tutorial" value="jQuery"><label>jQuery</label><br> <input type="checkbox" name="tutorial" value="AJAX"><label>AJAX</label><br> <input type="checkbox" name="tutorial" value="JSON"><label>JSON</label><br> <button type="button" id="btn">Submit</button> </form>
jQuery
First include jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
then we write script to get selected checkbox value in an array.
<script>
$(document).ready(function () {
$("#btn").on('click', function () {
var selValue = [];
$("input[name='tutorial']:checked").each(function(){
selValue.push($(this).val());
});
alert("You have selected: " + selValue);
});
});
</script>