How to Select all Checkboxes on Click Using jQuery

Hello Everyone this is my first post in voidtricks. Keep in touch with us and subscribe for our feed.

select all check boxes with jquery

In this tutorial i’m gonna teach you, how to select all checkbox elements in your page or in a particular div when you check or click a checkbox at the top. You will see this type of option in all your email inbox. So you can easily delete or do whatever action at once.

Requirements

Step 1 : Creating Basic HTML Markup

<!DOCTYPE html>
<html>
<head>
<title>Select All Checkboxes with jQuery</title>
</head>
<body>
<p class="opt"><input type="checkbox" id="checkAll"> Select All</p>
<hr>
<p><input type="checkbox" class="chk">hi, people how are you?</p>
<p><input type="checkbox" class="chk">Its raining today</p>
<p><input type="checkbox" class="chk">I'm a good guy</p>
<p><input type="checkbox" class="chk">void Tricks is a new tutorial website</p>
<p><input type="checkbox" class="chk">We're using jquery for this tutorial</p>
<p><input type="checkbox" class="chk">Please Like us on facebook and google plus</p>
<p><input type="checkbox" class="chk">Share this post to your friends!</p>
</body>
</html>

Take a look at the above code. This is a basic html code. Inside of BODY tag I’ve created some checkboxes and some texts.

I’ve given a ID of “checkAll” for the top most checkbox and for other checkboxes I’ve given class name of “chk”. We’re gonna use it in jQuery.

Step 2: Creating jQuery Code

To use jQuery you need to include jQuery library into your document like below.

<script type="text/javascript" src="jquery.min.1.10.js"></script>

jQuery


$(document).ready(function  () {
	$('#checkAll').click(function(){

		if($(this).prop( "checked" )){
			
			$('.chk').prop('checked',true);
		}
		else{
				
			$('.chk').prop('checked',false);
		}
		
	});
});

When you click the checkbox at the top with the ID of “checkAll”, it will check whether the checkbox with the ID “checkAll” is actually checked or not using .prop() method in jQuery.

If so, it will set the property checked=”true” to other checkboxes with the class name of ‘chk’. Otherwise, it will set the property checked = “false”.

Thats’it. So the full code will look like this.

<!DOCTYPE html>
<html>
 <head>
 <title>Select All Checkboxes with jQuery</title>
 <script type="text/javascript" src="jquery.min.1.10.js"></script>
 <script type="text/javascript">
 $(document).ready(function () {
 $('#checkAll').click(function(){

 if($(this).prop( "checked" )){
 $('.chk').prop('checked',true);
 }
 else{
 $('.chk').prop('checked',false);
 }
 
 });
 });
 </script>
 </head>
 <body>
 <p class="opt"><input type="checkbox" id="checkAll"> Select All</p>
 <hr>
 <p><input type="checkbox" class="chk">hi, people how are you?</p>
 <p><input type="checkbox" class="chk">Its raining today</p>
 <p><input type="checkbox" class="chk">I'm a good guy</p>
 <p><input type="checkbox" class="chk">void Tricks is a new tutorial website</p>
 <p><input type="checkbox" class="chk">We're using jquery for this tutorial</p>
 <p><input type="checkbox" class="chk">Please Like us on facebook and google plus</p>
 <p><input type="checkbox" class="chk">Share this post to your friends!</p>
 </body>
</html>

Now you can use CSS to style your page with your creativity.

Share this post to your friends and Share your feedbacks and questions in the comment below. Thank you


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

Leave a Reply

Your email address will not be published. Required fields are marked *