Header checkbox checks gridview rows however interface shows otherwise

Question

I've got a gridview within an update panel (web forms). The grid view has a header checkbox so that when you click the header checkbox it checks all item checkboxes below it, like so:

<asp:TemplateField>
         <HeaderTemplate>
              <asp:CheckBox ID="HeaderLevelCheckBox" runat="server" 
                onclick="toggleSelection(this);" ToolTip="Select / Deselect all rows?" />
         </HeaderTemplate>
         <ItemTemplate>
            <asp:CheckBox ID="chkSelector" runat="server" ToolTip="Select row?" />
         </ItemTemplate>
</asp:TemplateField>

Notice the function call onclick="toggleSelection(this);" this looks like this:

function toggleSelection(source) {
        $("#MainContent_gvCG input[id*='chkSelector']").each(function (index) {
            $(this).attr('checked', source.checked);
            if (source.checked)
                $(this).css({ backgroundColor: "yellow" });
            else
                $(this).css({ backgroundColor: "" });
        });
    }

This is declared right after document.ready within a script tag. When I initially load the page and click the headercheckbox all rows in the gridview are also selected (great...works). If I uncheck it all rows are unchecked (great works). The minute I click on it again the UI does not change (all items are not checked like they should be).

I was curious and upon inspecting the markup that too was right, when I click the header to check it to true I get row items that are checked:

<input id="MainContent_gvCG_chkSelector_5" type="checkbox" name="ctl00$MainContent$gvCG$ctl08$chkSelector" style="background-color: rgb(255, 255, 0);" checked="checked">

And when I uncheck the header it responds correctly like so:

<input id="MainContent_gvCG_chkSelector_5" type="checkbox" name="ctl00$MainContent$gvCG$ctl08$chkSelector" style="">

My issue is the UI does not change, meaning the checkboxes do not display as being checked even though the markup shows it as being checked. Is this due to being inside an updatepanel?

What can I do to fix this?

Answer 1

Try use jQuery prop instead of attr, it accepts a boolean value instead of using attr/removeAttr checked attribute.

Code:

    function toggleSelection(source) {
        $("#MainContent_gvCG input[id*='chkSelector']").each(function (index) {
            $(this).prop('checked', source.checked);
            if (source.checked)
                $(this).css({ backgroundColor: "yellow" });
            else
                $(this).css({ backgroundColor: "" });
        });
    }

Answer 2

You can use this.checked in your javascript

    function toggleSelection(source) {
        $("#MainContent_gvCG input[id*='chkSelector']").each(function (index) {
            this.checked = source.checked;
        });
    }

or as Irvin Dominin aka Edward commented

    $(this).prop('checked', source.checked);

Answer 3

Checkboxes are often tricky since they have multiple modes of changing the value, such as using the keyboard\mouse,etc. I'd recommend the following approach (having used it successfully in production with previous versions of jquery):

  $("[id$='chkSelector']").on('change', function () { 
    if ($(this).is(':checked'))
      $(this).css({ backgroundColor: "yellow" });
    else
      $(this).css({ backgroundColor: "" });
  });

And then in your "Toggle all button", you can trigger the state change:

 $("[id$='chkSelector']").each(function (index) {
   $(this).prop('checked', !$(this).is(':checked')); 
});