JQuery CheckAll in GridView

I have a GridView on an .ascx. I have an asp:Checkbox CheckAll checkbox in the head开发者_如何转开发er template for a column and then a checkbox in the ItemTemplate. I would like to add the functionality so that when I check the checkbox in the Header, it will check or uncheck all of the checkboxes in the GridView.

How do I do this with JQuery? I would then like to also add reverse functionality so that when I uncheck a checkbox within the GridView that it unchecks the checkbox in the Header.

You can play with the Checkbox 'CheckAll' ID and the rows' classes.

For example, you can have a control Id "chkSelectAllNone" (notice that this is going to change in the client for something like 'Ctl001_chkSelectAllNone') and you can assign the rows classes with the css class "select-row".

Then, create a jQuery script in the aspx (or writing it from the code behind) to handle the toggle Select All/None, like this one:

$("#<%= chkSelectAllNone.ClientID %>").click(function(){
$(".select-row").attr("checked", $("#<%= chkSelectAllNone.ClientID %>").attr("checked"));
});

Hope it helps.

I'm not sure if GridViews render a th, but if they do this should get you close:

$("th :radio").click(function() {
  if($(this).is(":checked")) {
    $("td :radio").attr("checked", "checked");
  }
});

$("td :radio").click(function() {
  var attr = $("td :radio").not(":checked").length ? "" : "checked";
  $("th :radio").attr("checked", attr);
});