IMG-LOGO

How to get selected checkboxes value using JQuery and Javascript?

andy - 05 Jun, 2013 269058 Views 18 Comment

In this tutorial, you will learn how you can get all the checkboxes values using JQuery.

We will give you two example scripts, one is the script will search the checkboxes on the div wrapping a list of checkboxes, while the second example script is based on the class of the checkbox itself. You can use one of the method, just use the one you feel comfortable with and easier to integrate with your current website.

You can see the quick demo in here.

Value 1
Value 2
Value 3
Value 4
Value 5

 

Before started the tutorial, make sure you add the JQuery file to your website.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>

Let's say we have the following html code, see carefully that there is a div wrapper identified with id "checkboxlist" and classes called "chk" tagged to each checkbox. There will be two buttons to test, one is getting the checkboxes value by using class and the other one is based on the parent ID.

<div id="checkboxlist">
    <div><input type="checkbox" value="1" class="chk"> Value 1</div>
    <div><input type="checkbox" value="2" class="chk"> Value 2</div>
    <div><input type="checkbox" value="3" class="chk"> Value 3</div>
    <div><input type="checkbox" value="4" class="chk"> Value 4</div>
    <div><input type="checkbox" value="5" class="chk"> Value 5</div>
    <div>
    	 <input type="button" value="Get Value Using Class" id="buttonClass"> 
    	 <input type="button" value="Get Value Using Parent Tag" id="buttonParent">
    </div>
</div>

Below is the JQuery or JavaScripts functions.

/* if the page has been fully loaded we add two click handlers to the button */
$(document).ready(function () {
	/* Get the checkboxes values based on the class attached to each check box */
	$("#buttonClass").click(function() {
	    getValueUsingClass();
	});
	
	/* Get the checkboxes values based on the parent div id */
	$("#buttonParent").click(function() {
	    getValueUsingParentTag();
	});
});

function getValueUsingClass(){
	/* declare an checkbox array */
	var chkArray = [];
	
	/* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
	$(".chk:checked").each(function() {
		chkArray.push($(this).val());
	});
	
	/* we join the array separated by the comma */
	var selected;
	selected = chkArray.join(',') ;
	
	/* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
	if(selected.length > 0){
		alert("You have selected " + selected);	
	}else{
		alert("Please at least check one of the checkbox");	
	}
}

function getValueUsingParentTag(){
	var chkArray = [];
	
	/* look for all checkboes that have a parent id called 'checkboxlist' attached to it and check if it was checked */
	$("#checkboxlist input:checked").each(function() {
		chkArray.push($(this).val());
	});
	
	/* we join the array separated by the comma */
	var selected;
	selected = chkArray.join(',') ;
	
	/* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
	if(selected.length > 0){
		alert("You have selected " + selected);	
	}else{
		alert("Please at least check one of the checkbox");	
	}
}

Need to see the quick demo? Please click this link.

Comments

jon
06 Apr, 2016
Good stuff
Ali
24 May, 2016
Very Nice and Effective ......
rani
17 Aug, 2016
superb code to understand
Fabian
04 Sep, 2016
Awesome, thank you for sharing this
Delamou
15 Nov, 2017
Thanks... for saving me... appreciated...
Gajanan
25 Jan, 2018
It's awesome example, but default length for selected is 0 and if we checked one item then length becomes 1. Just small change in if condition "if(selected.length > 0)"
andy
26 Jan, 2018
Thx Gajanan for advising the changes. I have updated the code.
Mansoor
05 Feb, 2018
Easy and simple to implement. You saved my time. Thanks for wonderful contribution and help.
Neil Dhakal
22 Apr, 2018
Thanks for saving my time.
Melih Karasu
29 Sep, 2018
thank you brotha :)
Rurei
14 Nov, 2018
Saves the day. Thanks bro.
Michu
28 Nov, 2018
This code can be simplified dramatically: [...document.querySelectorAll('.chk:checked')].map(checkbox => checkbox.value)
andy
29 Nov, 2018
Thanks Michu for the feedback. Hopefully, the readers can have a quick and elegant answer for this.
bala
28 Nov, 2018
i want some modification in above one if i click 1 ,5 ,2 check box in this order means ,it should alert "You have selected 1,5 ,2" how to do? need help thanks in advance
Berkan
08 Apr, 2019
Awesome, thank you...
Sohel
24 Jun, 2019
very much helpful thanks for the post
Gowtham
25 Sep, 2019
This is Very Much long and it can be simplified by, var selectedLanguage = new Array(); $('input[name="chk"]:checked').each(function() { selectedLanguage.push(this.value); }); this will return the exact result.
Munavar
01 Jan, 2020
Very nice
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

Become a jquery expert in just 10 minutes.

Completely new to JQuery script Don t worry you are not alone We have summarize a list of tips for newbie to learn JQuery faster The best way to strength your JQuery skills is by testing our tips directly in ...