Selecting all CheckBoxes of Gridview on Header CheckBox Click using jQuery

Checking/un-checking all row checkboxes on header checkbox checked and checking to header checkbox when user checked to all row level checkboxes.

You may find many online resources on this with different approaches as there are many approaches to handle Header checkbox checking/un-checking with Gridview's row level checkboxes.

I am posting it as a blog, as I found code snippet itself explanatory. So, instead of wrapping the actual code with more textual content will not fine and waste your time :).

Well, the code is simple and magic is nothing but a simple logic.

1. We wanted to check/uncheck boxes of GridView row on header Checkbox selection

So, we will write a code for it as-

// Handle your header CheckBox Click
$("[id$=HeaderCheckBox]").click(function () {
   $("input:checkbox[name$=RowCheckBox]").attr('checked',this.checked);
});

2. We wanted to check/uncheck our header checkbox if user selects all row level checkboxes

So, this also need to handle, and we can do it as -

// Handle invidual checkbox click
$("[id$=RowCheckBox]").click(function () {
 If ($("input:checkbox[name$=RowCheckBox]").length == $("input:checkbox[name$=RowCheckBox]:checked").length)

$("[id$=HeaderCheckBox]").attr('checked', "checked");
 else
      $("[id$=HeaderChecBox]").removeAttr("checked");
});

And the complete code would be -

Thanks for your passions on small chunk of code :)