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?

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?

• javascript
• jquery
• asp
• gridview
• checkbox

• 1 Try use jQuery prop instead of attr, it accept bool value instead of attr/removeAttr checked – Irvin Dominin Commented Dec 20, 2013 at 21:11
• @Irvin yea that works $(this).prop('checked', source.checked); – Emre Commented Dec 20, 2013 at 22:00

4 Answers 4

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: "" });
        });
    }

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 mented

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

Checkboxes are often tricky since they have multiple modes of changing the value, such as using the keyboard\mouse,etc. I'd remend 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')); 
});

When u are using * it will find all checkboxes which contains chkSelector in their id.

Use $ instead of * it will find all chechboxes ending with chkSelector in their id.

The controls in gridview will have the clientid at the end of the id attribute when they get rendered.

Working with your code:

function toggleSelection(source) {
        $("[id$='chkSelector']").each(function (index) { //Use $ here insted of *
            $(this).prop('checked', source.checked);//also use prop instead of attr
            if (source.checked)
                $(this).css({ backgroundColor: "yellow !important" });//also use !important
            else
                $(this).css({ backgroundColor: "" });
        });
    }