5 Reasons of jQuery - $ is not defined error

"jQuery is not defined" or "$ is not defined" is a very common error that you may face while working with jQuery or if you have started learning jQuery. The error message "jQuery is not defined" clearly says that it can't find the jQuery and you are trying to access jQuery's power. So in this post, find 5 reasons and their solutions of this error.

Reason 1:

You have forgot to include the reference of jQuery library and trying to access it.

Reason 2:

You have include the reference of the jQuery file, but it is after your jQuery code. For example,
<script type="text/javascript" language="javascript">
  $(document).ready(function() {
      //Your jQuery code goes here....

<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
So in this case, you will encounter "jQuery is not defined" error, as the reference of the jQuery library is after the code.

Reason 3:

The order of the scripts is not correct. For example, if you are using any jQuery plugin and you have placed the reference of the plugin js before the jQuery library then you will face this error. For example,
<script type="text/javascript" src="Script/jquery-plugin.js"></script>
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
Above code is clear case of incorrect ordering. As when plugin try to access the jQuery and jQuery is not loaded yet then this error will come. So the correct order should be,
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Script/jquery-plugin.js"></script>

Reason 4:

If you are using jQuery UI library then please ensure that order is correct. You first need to include reference of jQuery library and after that jQuery UI library. This is incorrect ordering.
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
Correct order is:
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>

Reason 5:

If you are loading the jQuery library from any of the CDN (Read Load your jQuery framework from CDN), then please check that CDN link is working. So the best thing is to use code to load jQuery even if the CDN link is down. Read How to load jQuery locally when CDN fails

So there are 3 possible solution for this error.
  •  Please ensure that you have included the reference of jQuery library.
  •  Please ensure the order of loading jQuery library in case if you are using any other js which is dependent on jQuery library.
  • If you are using CDN, then read and implement How to load jQuery locally when CDN fails
Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery to remove duplicate items from array

jQuery to remove duplicate items from array
Find jQuery code to remove duplicate items from an array using $.unique().

Earlier I had posted about jQuery solution to remove item from array, split an array, combine/join arrays and Find index of element in array, And In this post, find how to remove duplicate items from array with example.

$(document).ready(function () {
    var arr = [10, 19, 22, 36, 50, 74, 10, 22];
    $('#dvallElements').html(arr.join("<br />"));
    arr = $.unique(arr);
    $('#dvUniqueItems').html(arr.sort().join("<br />"));
See result below

See Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.

Learn how to use jQuery?

In this post, you will go through What is jQuery, why to use jQuery and learn how to use jQuery. jQuery is without any doubt is the most popular client side library. The popularity of jQuery is so much that it has become must for every developer. Before, you go further let me clear the very first doubt that "jQuery is not a language".

What is jQuery?

jQuery is a library written on top of the JavaScript. So it is a JavaScript library. It is a library for the JavaScript programmers, which makes web development like a piece of cake. jQuery helps the programmers to keep code simple and concise. The biggest advantage of jQuery is that jQuery library is designed to keep the things very simple and reusable. Motto is jQuery library is "Writing JavaScript code should be fun."

jQuery library simplifies the process of traversing and finding elements in HTML document. It provides methods to make animations, add ajax interaction to the page, provides an easy way to apply CSS to any items and provides an easy mechanism for binding and unbinding events. Lengthy JavaScript code can easily replaced by few lines of code in jQuery.

Why to use jQuery?

A question came that when all the things can be achieved using JavaScript then why to go for jQuery? Well the answer is that The jQuery library is has many easy to use functions and methods to make rich applications. And believe me these functions are fairly easy to learn and even it is not difficult for designers or freshers to learn. Due to it's simplicity, jQuery is pretty easy to learn and easy to write. jQuery is a client side language so it can be easily used with ASP.NET,PHP,JSP and Servlets.

Features of jQuery

  • It works on all browsers
  • It is fast and extensible
  • Make look UI stunning
  • Allows to access elements in the document
  • Easily apply CSS
  • Perform animation in better way
  • Ajax Interaction made easy
  • Change document’s content easily
  • Event handling made easy
  • Big pool of reusable plugins for various functionalities

Where to download jQuery?

jQuery file can be downloaded from jQuery Official website http://www.jquery.com/

jQuery Versions

jQuery library comes in 2 forms:
  • The uncompressed .js file is easy to read and modify, but it's around 190kb in size (at the time of writing).
  • The minified .js file has all comments, whitespace, and other unnecessary characters removed from the file, squeezing the whole library into a mere 23kb. Although you can't easily read the code, this is the version you'll want to place on your site, as it's much quicker for visitors to download.

How to use jQuery

To start with jQuery, first download the jQuery from it's official website (http://JQuery.com). Make sure you download the latest copy of the jQuery. You will find that it's a single JavaScript file. Yes, single JavaScript file with lots of magic. No installation is required, you just need to add reference of the jquery.js.
<script src="Script/jquery.js" type="text/javascript"></script>
I have copied the jquery.js and placed it in script directory. For demo, we will see how easily we can change the CSS.

Let's first take a look at HTML.
<h2>History of jQuery</h2>
<div id="content">
Initially it's was released in January 2006 but the very first stable version of jQuery 1.0 was released in August 2006. This version had support for CSS, events and Ajax. After that many version of jQuery were released and latest version is jQuery 1.9. 
In the above HTML, there is div element with ID "content". Now, we will see how to find the div and apply CSS to it using jQuery. Let's see CSS class.
<style type="text/css">
   font-family: calibri;
   font-size: 12pt;
   color: blue;
The first thing to learn about jQuery is $(document).ready() function. It is an entry point and gets called as soon as DOM is loaded. You need to place all your jQuery code within this function. JavaScript developers can think of window.onload() being similar to $(document).ready(). But it is different. Will explain later in the post.
<script type="text/javascript" language="javascript">
 $(document).ready(function() {
A .ready() handler can be placed anywhere on the page and you can even have multiple ready handlers in the page. Now, if you view this page in browser, the you will see the div with content id is having gray background and white color foreground.

See Complete Code

window.onload() vs $(document).ready()

window.onload() and $(document).ready() are different. document.ready() gets called as soon as your DOM is loaded. It does not wait for the contents to get loaded fully. For example, there are very heavy images on any web page and takes time to load. If you have used window.onload() then it will wait until all your images are loaded fully, hence it slows down the execution. On the other side, document.ready() does not wait for elements to get loaded.

What are jQuery CDN?

CDN Stands for Content Distribution Network or also called Content Delivery Network is a large distributed system of servers deployed in multiple data centers in the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. There are several advantage of using CDN.
  • Reduce Load: It reduces the load on your web server as it downloads from Google server's.
  • Caching: The most important benefit is caching. If any previously visited site by user is using jQuery from any CDN then the cached version will be used. It will not be downloaded again.
  • Serves fast: You will be also benefited from speed point of view. As CDN has dozen's of different servers around the web and it will download the jQuery from whichever server is closer to the user.
  • Parallel Downloading: As the jQuery js file is on a separate domain, modern browsers will download the script in parallel with scripts on your domain.
There are 3 different CDN that provide jQuery.
  • Google
  • Microsoft
  • jQuery
Code to load jQuery Framework from Google CDN
<script  type="text/javascript"
Code to load jQuery Framework from Microsoft CDN
<script  type="text/javascript"
Code to load jQuery Framework from jQuery Site(EdgeCast CDN)
<script  type="text/javascript"
It is a good practice to use CDN but what if the CDN is down (rare possibility though) but you never know in this world as anything can happen. So if you have loaded your jQuery from any CDN and it went down then your jQuery code will stop working and your client will start shouting. Read "How to load jQuery locally when CDN fails".

Note:When this post is written, the latest version of jQuery is 1.9


This post gives you clear idea about what is jQuery and how to start with it. It is not possible to cover everything but this post is good enough to kick start. So start learning jQuery and start using it. Some of my previous series of articles will help you to learn jQuery.
Feel free to contact me for any help related to jQuery, I will gladly help you.

All kind of Client Side Validation using jQuery

All kind of Client Side Validation using jQuery
Validation is most important and required feature on any web page. And Client side validation plays an important part. So find jQuery code to validate email address, phone number, date, date format, textbox with only number and many more validation techniques.

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery to round off decimal values

jQuery to round off decimal values
To round off decimal values using jQuery, we can use the built-in JavaScript methods toFixed() or toPrecision().

The toFixed() method converts a number into a string, keeping a specified number of decimals.
var iNum = 12345.6789;
iNum.toFixed();    // Returns "12346": note rounding, no fractional part
iNum.toFixed(1);   // Returns "12345.7": note rounding
iNum.toFixed(6);   // Returns "12345.678900": note added zeros
The toPrecision() method formats a number to a specified length.
var iNum = 5.123456;
iNum.toPrecision();    // Returns 5.123456
iNum.toPrecision(5);   // Returns 5.1235
iNum.toPrecision(2);   // Returns 5.1
iNum.toPrecision(1);   // Returns 5
But then you will be wondering how toPrecision() is different from toFixed()? Well, they are different.toFixed() gives you a fixed number of decimal places, whereas the other gives you a fixed number of significant digits.
var iNum = 15.667;
iNum.toFixed(2);        // Returns "15.67"
iNum.toPrecision(2);    // Returns "16"
iNum.toPrecision(3);    // Returns "15.7"
Feel free to contact me for any help related to jQuery, I will gladly help you.

5 Free jQuery Full Screen Calendar Plugins

Online Full Screen jQuery calendar are quite useful as they allows to create schedule, agenda, events, reminders, scheduling meetings and many more useful things. So, in this post we have collected 5 Free jQuery Full Screen Calendar Plugins which are lightweight, easy to integrate.

Related Post:

Calendario: A Flexible Calendar Plugin

Calendario is a jQuery calendar plugin that aims to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. On large screens we want to show a grid-based layout while on smaller screens, we want to simply stack the days of the month


FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar).

jQuery wdCalendar

wdCalendar is a jQuery based Google calendar clone. It cover most Google calendar features.

jQuery Frontier Calendar

Full month calendar jQuery plugin that looks like Google Calendar. All UI elements such as next-month & previous-month buttons, add event form, edit event form, tooltip, etc, are not part of the calendar plugin.

jQuery Week Calendar

The jQuery Week Calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jQuery and jQuery UI and is inspired by other online weekly calendars such as Google calendar.

Feel free to contact me for any help related to jQuery, I will gladly help you.

How to migrate older jQuery code to jQuery 1.9+

How to migrate older jQuery code to jQuery 1.9+
jQuery team with their previous release has marked many methods/features deprecated but they were available with earlier jQuery releases. But with release of 1.9 version of jQuery many deprecated methods are discarded now and no longer available. Which are,

Related Post:
  • jQuery.browser docs
  • jQuery.fn.andSelf() docs
  • jQuery.sub() docs
  • jQuery.fn.toggle() docs (_event click signature only_)
  • "hover" pseudo-event name docs
  • jQuery.fn.error() docs
  • ajaxStart, ajaxSend, ajaxSuccess, ajaxError, ajaxComplete, ajaxStop global events on non-document targets docs
  • Use of attrChangeattrNamerelatedNodesrcElement on the Event object (use Event.originalEvent.attrChangeetc. instead)
  • jQuery.fn.attr() using the pass argument (undocumented)
  • jQuery.attrFn object (undocumented)
  • jQuery.fn.data() data events (undocumented)
  • jQuery.fn.data("events") to retrieve event-related data (undocumented)
But there are many sites in production which are still using these deprecated features and it's not possible to replace them overnight. So jQuery team provided with jQuery Migrate plugin that makes code written prior to 1.9 work with it.

This project can be used to detect and restore APIs, features or functionality that have been deprecated in jQuery and removed as of version 1.9. The plugin can be included with versions of jQuery as old as 1.6.4 as a migration tool to identify potential upgrade issues. However, the plugin is only required for version 1.9 or higher to restore deprecated and removed functionality.

This plugin comes in production and development version. To make it easier for jQuery developers to find and remove deprecated functionality, the development version of the plugin displays warnings on the browser's console.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Top 10+ jQuery Popup window plugins

We all are familiar with Popup Windows which are great way to show alert, notice, news, information, errors, modal popups, modal windows, dialog or take inputs. Earlier I had posted about jQuery Photo Gallery Plugins, Plugins to create Pinterest like layout and jQuery Page Flip Plugins. So in this post, I have gathered Top 10 jQuery Popup window plugins and tutorial which can be easily integrated in your website. Enjoy..

Also find updated list:
You may also like:

1. Speedo Popup jQuery Plugin

Speedo Popup is a powerful popup / modal plugin. It`s fully RESPONSIVE and is designed to provide an optimal viewing experience. Also has compatibility for HTML5 and CSS3 and has multiple predefined SKINS or effect transitions. COOKIE and VIDEO SUPPORT are another amazing features.

2. Likno Web Modal Windows Builder

Likno Web Modal Windows Builder is not only a plugin but it is a powerful application (with a visual WYSIWYG interface) for creating stylish and feature-rich jQuery popup windows/dialogs for your web pages, with minimal effort and coding.

You can use simple text, HTML, images, videos, ajax, flash, opening/closing effects, colors, slideshows, auto-play, automatic opening "on page load"(and more!) to create any type of popup window/dialog, such as: html window, html popup, jQuery popup, modal popup, modal dialog, jQuery modal, modal window, etc.

All modal windows are cross-browser and work alike in all browsers.

3. Reveal

Reveal is awesome because it's easy to implement, is cross-browser compatible with modern browsers (with some graceful degradation of course) and lightweight coming in at only 1.75KB.

4. Popup Dialog Box for jQuery Mobile

5. jQuery.bPopup.js

bPopup is a lightweight jQuery modal popup plugin. It doesn't create or style your popup but provides you with all the logic like centering, modal overlay, events and more.

6. Avgrund Modal

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

7. jQuery YouTube Popup Player Plugin

This is an easy to use jQuery Plugin to integrate YouTube videos on your page by displaying a dialog box pop-up. He used jQuery UI Dialog Widget context that the container rather than reinventing the wheel. dialogue jQuery UI is a robust mechanism for cross-browser to display a dialog box pop-up with the title bar, including a mobile box with modal behavior.

8. jQuery UI Dialog

The jQuery UI Dialog plugin uses the jQuery UI Framework to build and give style which includes colors and background as well.

9. Messi

Messi is a jQuery plugin to show clean, elegant messages in a simple way. With Messi you will avoid to use default JavaScript alert notifications or new windows to provide extended information to the user.

10. Simple Modal

SIMPLEMODAL is a small plugin to create modal windows. It can be used to generate alert or confirm messages with few lines of code.

11. LeanModal.js

leanModal is lightweight jQuery plugin to create modal windows. It is quite flexible. It doesn't support Ajax, iFrame.

12. jQModal

jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny.

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery to count words in each paragraph

jQuery to count words in each paragraph
Find jQuery code to count number of words in each paragraph or HTML <p> tag element. Below jQuery code does following things.
  • Iterates through each paragraph element.
  • Split the paragraph text using space. Split() returns array so take the length of array which represents number of words.
  • Then appends the count to paragraph itself.
$(document).ready(function() {
    $('p').each(function(i) {
        var iTotalWords = $(this).text().split(' ').length;
        $(this).append(" " + iTotalWords + " words ");
See result below

See Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.

All you need to know about jQuery Source Maps

1.9 version of jQuery is already released with some new features and many bug fixes. One of the exciting feature of the release is support for Source Maps!

Related Post:

What are exactly Source Maps?

In case of jQuery, Source Map is nothing but mapping of minified version of jQuery against the un-minified version. At the moment just Google Chrome is supporting this feature, but Mozilla Firefox is planning support as well. To know more about Source Map, visit this tutorial.

At the time of writing this article, Chrome version is : 24.0.1312.52 m

UPDATED ON SEPTEMBER 5, 2013: Source Map feature is now also supported by Firefox version : 23.0.1 Read "How to enable source maps in Firefox"

Why Source Maps are useful?

Well, imagine that you are using compressed versions of your files on your production site, including a compressed version of jQuery. You get a report that an important customer is running into a problem. Then how do you debug it? You could debug it a lot easier if you had the uncompressed source, but using that on your high-traffic production site isn't an option.

Consider, you are using minified version of jQuery and you are trying to debug particular line of code. (See Image)

Now when you start debugging and you are on the particular line.

And you press (F11 or Click Step into Next Function Call), the debugger tool will take you to jquery.min.js.

And looking at jquery minified version, it is impossible to find out the error.

But with source maps, you can let the browser’s debugger "map" the lines in the compressed file into the uncompressed source. For Source map to work successfully, two things are required.
1. Value of sourceMappingURL exists on your server or locally.
2. Browser Support

If you are using jQuery from any of the CDN (jQuery, Google, Microsoft) then you don't have to worry about sourceMappingURL variable value because it is already set. Below screenshot is of jQuery 1.9.0.min.js and notice that the value is already set to jquery.min.map file.

jQuery team has also confirmed that jQuery final releases will also get matching source maps from now on.

Enable Source Map in Chrome

To enable source maps in chrome, Go to Tools -> Developer Tools. Or right click on the browser area and select "Inspect Element". Once it is open, click on Setting. (See Image)

Now, in Settings -> General Tab, you will find option to "Enable Source Map". So check this option to enable it. If you don't find this option, then please update your Chrome to latest version.

Now when you execute the same line of code again and press (F11 or Click Step into Next Function Call), the debugger tool will take you to jquery.js

Important notes

When hosting your own copy of jQuery, copy the map to your server and use it from there. For simplicity we assume that the compressed and uncompressed copy of jQuery is in the same folder as the map file; this is the case for CDN versions and you should follow the same rule if you make local copies.

The map file name is the same as the compressed version, with .map replacing .js. Do not rename the files when you copy them. So, if you were to use a local copy of jquery-1.9.0.min.js the corresponding map file would be jquery-1.9.0.min.map and the uncompressed file would be jquery-1.9.0.js in the same folder.

And you must be wondering how to I create .map file or what are the content of .map file? Well, you can get all the details here. If you want to take a look at jquery.min.map file then open this URL.


This is indeed a very useful feature as it allows to debug minified version against a un-minified version. And it will become more effective when other browsers also start supporting it.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Download ASP.NET GridView & jQuery Tips and Tricks eBook PDF

Being an ASP.NET developer and fan of jQuery, I had put together all my real life experience with ASP.NET GridView Control and jQuery and complied them in my first ever eBook named "ASP.NET GridView and jQuery Tips and Tricks". This eBook takes you through 16 different, useful, tips and tricks and offers solution for all possible requirements with ASP.NET GridView control. This is a point to point eBook with detailed explanation of code. Along with this eBook, code samples are also attached.

This eBook was not possible without my blog readers and followers. Your continuous support is encouraging and motivates to do more good things. "Thank You".

What you will learn from this book :
  1. Formatting ASP.NET GridView rows
  2. Highlight row on mouseover in ASP.NET GridView
  3. Set Alternate color for ASP.NET GridView columns
  4. Highlight ASP.NET GridView Rows when Checkbox is checked
  5. Change cursor to hand on mouseover in ASP.NET GridView
  6. How to remove ASP.NET GridView rows
  7. How to remove ASP.NET GridView columns
  8. Drag and Drop ASP.NET GridView rows
  9. How to loop through all ASP.NET GridView rows
  10. How to access particular cell in ASP.NET Gridview
  11. How to filter ASP.NET GridView records
  12. How to search through GridView records
  13. Get ASP.NET GridView Cell Value on Click
  14. Check/uncheck checkboxes in Asp.NET GridView
  15. Highlight empty table element
  16. Hide table rows with empty td element
Download eBook
Feel free to contact me for any help related to jQuery, I will gladly help you.

6+ jQuery Plugins to create Pinterest like layout

Pinterest is social media sites that allow us to share content such as video, text, and images. One of the main highlights of this site is its layout design that uses a dynamic grid column. The content are arranged like newspaper columns and these are arranged neatly without any gaps.

So, today find a complied list of top 6+ jQuery Plugins to create Pinterest like layout. If you want to create a similar layout, these plugins could help you to do it.

Wookmark jQuery Plugin

The Wookmark plugin detects the size of the window and automatically organizes the boxes into columns. Resize your browser to see the layout adjust. Note how the columns are approximately of equal height.

jQuery Masonry

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid.


An amazing layout plugin that allows for intelligent and dynamic grids of items that can be easily sorted and filtered.


Waterfall is a powerful and customizable jQuery plugin for creating dynamic and responsive Pinterest like layout which supports infinite ajax scroll.


A fluid asymmetrical animated grid plugin for jQuery.

Pinterest Clone Layout


BlocksIt.js is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into 'blocks' and position them in well-arranged grid layout like Pinterest.

Feel free to contact me for any help related to jQuery, I will gladly help you.

4 jQuery Instagram Plugins collection

Instagram is without any doubt is most popular online photo-sharing and social networking service that enables its users to take a picture, apply a digital filter to it, and share it on a variety of social networking services. Instagram is fast, beautiful and fun way to share your photos with friends and family.

So In this post find list of jQuery Instagram plugins that will allow you to pull in your own Instagram pictures, tag specific photos.


A simple jQuery plugin to show a list of Instagram photos.

jQuery Spectragram

An easy jQuery plugin for Instagram API to fetch and display user, popular or tags photo feeds inside your web application or site.


The jQuery plugin allows you to embed your instagram photos within any element on your site. Simply include the plugin script, and bind it to an element.

Jquery Instagram Browser

This is a plug-in designed to allow you to easily pull photos from your Instagram account and render them on your website. Simply pass in your username and the rest is take care of for you! This is a paid plugin.

Feel free to contact me for any help related to jQuery, I will gladly help you.

Turn off autocomplete for textbox in ASP.Net using jQuery

Turn off autocomplete for textbox in ASP.Net using jQuery
jQuery code to turn off autocomplete for ASP.NET textbox.
  $("#<%=Textbox.ClientID %>").attr("autocomplete", "off");
But there is no need to use jQuery for this as this can be done easily just by setting attribute for ASP.NET textbox.
<asp:TextBox runat="server" ID="Textbox" autocomplete="off"/>
But jQuery can be useful, if there are many ASP.NET textboxes then jQuery can be useful. Instead of setting attribute for every textbox can take time but using jQuery you can turn off using jQuery.

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery code to disable double click event

jQuery code to disable double click event
jQuery code to disable double click event on the webpage.
Above jQuery code will disable double click event for all the controls on the webpage. If you want to disable for specific control, let's say a button with ID "btnSubmit" then,
Feel free to contact me for any help related to jQuery, I will gladly help you.

Check/uncheck checkboxes in Asp.net GridView using jQuery

Find out jQuery code to check/uncheck or select/deselect all the checkboxes in ASP.NET Gridview. There are already plenty of articles on this topic but then how this is different. Assume, all the checkboxes are checked when header checkbox is checked but then you uncheck one of the child checkbox then what happens to your header checkbox? It should also get unchecked. Right? That's is where this post is different from others.

In this post, find jQuery code to
- Check/uncheck all child checkbox based on parent checkbox status.
- Update parent checkbox status based on child checkbox status.

Also Read:

How to do it?

  • Bind the click event to parent checkbox of ASP.NET GridView.
$('#gdRows').find('input:checkbox[id$="chkParent"]').click( function() {
  • In the click event, based on the parent checkbox status set the child checkbox status.
var isChecked = $(this).prop("checked");
$("#gdRows [id*=chkSelect]:checkbox").prop('checked',isChecked);
  • So the complete code for parent checkbox click event is,
$('#gdRows').find('input:checkbox[id$="chkParent"]').click( function() 
    var isChecked = $(this).prop("checked");
    $("#gdRows [id*=chkSelect]:checkbox").prop('checked',isChecked);
  • Now, based on the child checkbox status also need to update the parent checkbox. For example, if out of all the child checkboxes, one is unchecked then parent checkbox should also be checked.

    So for this, attach an click event handler to all the child checkboxes of ASP.NET GridView.
$('#gdRows').find('input:checkbox[id$="chkSelect"]').click(function() {
  • In this event, first define a flag with true value. And then loop through all the child checkbox and if one of the child checkbox is unchecked then set the flag value to false. And then update parent checkbox status value based on the flag variable value.
var flag = true;
$("#gdRows [id*=chkSelect]:checkbox").each(function() {
      if ($(this).prop("checked") == false) 
        flag = false;
$("#gdRows [id*=chkParent]:checkbox").prop('checked', flag);
So putting it together the complete jQuery code is,
$(document).ready(function() {
     var isChecked = $(this).prop("checked");
     $("#gdRows [id*=chkSelect]:checkbox").prop('checked', isChecked);
     var flag = true;
     $("#gdRows [id*=chkSelect]:checkbox").each(function() {
         if ($(this).prop("checked") == false) 
           flag = false;
     $("#gdRows [id*=chkParent]:checkbox").prop('checked', flag);

See result below

Feel free to contact me for any help related to jQuery, I will gladly help you.

jQuery and ASP.NET DropDownList

jQuery and ASP.NET DropDownList
"ASP.NET DropDownList" or "DropDown" or "ComboBox" Or "Select Box" Or "HTML Select Control"..oh!!! One form, many names. Yes, they all are same, just the difference of name. In this post, find list of post related with DropDownList and jQuery. The below list have solution for every common task, problem or issues.

So Bookmark it.. You never know when you need it. :)
Feel free to contact me for any help related to jQuery, I will gladly help you.