Home

How To Get Selected Checkboxes Value Using jQuery

Published on 7th Feb 2018 in jQuery

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>

Demo

Share It
Stay Connected
Like Us on Facebook