Published on: 05 June, 2013

How to get selected checkboxes value using JQuery and Javascript

Posted by andy | 100499 views 22 likes 7 favourites 4 comments
Tumblr Digg Google Plus

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 > 1){
		alert("You have selected " + selected);	
	}else{
		alert("Please at least 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 > 1){
		alert("You have selected " + selected);	
	}else{
		alert("Please at least one of the checkbox");	
	}
}

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

Comments
jon
Commented on: 06 Apr, 2016 07:04:06 PM
Good stuff
Ali
Commented on: 24 May, 2016 02:42:41 PM
Very Nice and Effective ......
rani
Commented on: 17 Aug, 2016 03:01:12 AM
superb code to understand
Fabian
Commented on: 04 Sep, 2016 08:08:53 AM
Awesome, thank you for sharing this
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Related Articles
Published on: 22 March, 2016
In this tutorial, you will learn how to create a category menu list using css and JQuery framework. You will also learn on how to automatically place an arrow into the LI element if it founds there is a sub menu list. The placement of the arrow is done via JQuery, this includes binding the event onclick on the LI element as well to expand and collapse the sub menu list.
Published on: 08 March, 2016
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 your html files and run it.
Related Tutorials
Published on: 25 January, 2016
So what actually an event? An event can be considered as a result of an action triggered by a process which can be a process clicking of a user or when a page is loading.
Published on: 20 December, 2015
Learn how easily to manipulate DOM element selection using JQuery. One of the cool feature from JQuery is the DOM selector. In javascript, when you want to reference an object, you can refer the object either based on ID or class name of the object by using the built in function such as getElementById or getElementByTagName or getElementsByClassName.
Published on: 15 December, 2015
Getting started by writing your first JQuery code. Learn how to create it from scratch and apply it on your site. The best way to start your first JQuery function is after the browser has completedly loaded the page content. There are two short methods to do so.
Published on: 13 December, 2015
Learn what is the JQuery framework is and why many web developers and designers love to this framework.