Geek Answers Handbook

Checkbox Header checks gridview lines, however interface shows otherwise

I have a grid in the update panel (web forms). There is a heading in the grid view, so when you click on the heading, it checks all the checkboxes below it, for example:

<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>

Pay attention to the function call onclick="toggleSelection(this);" which 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 immediately after document.ready in the script tag. When I initially load the page and click on the headercheckbox button, all the rows in the gridview are also selected (great ... works). If I uncheck it, all lines will not be marked (big work). The very moment I click on it again, the user interface does not change (all elements are not checked as they should be).

I was curious and after checking the markup, which was also right, when I click on the title to check it for true, I get the checked line items:

<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 remove his title, he answers like this:

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

My problem is that the user interface does not change, that is, the flags do not appear as checked, even if the markup shows it as being checked. Is it due to what's inside the update panel?

What can I do to fix this?

+7
javascript jquery checkbox gridview
source share
4 answers

Try using jQuery prop instead of attr , it takes a boolean value instead of the attr / removeAttr attribute.

the 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: "" }); }); }
+3
source share

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 Irwin Dominin, known as Edward , commented

  $(this).prop('checked', source.checked);
+2
source share

Flags are often complex because they have several modes of changing the value, for example, using the keyboard / mouse, etc. I would recommend the following approach (successfully using it in 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 a state change:

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

When u uses * , it will find all flags containing chkSelector in its id.

Use $ instead of * to find all chechboxes ending in chkSelector in their identifier.

Gridview controls will have a clientid at the end of the id attribute when rendering them.

Work 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: "" }); }); }
0
source share

More articles:


All Articles