CODEWITHSUNDEEP
javascriptasp.netgridview
Ebikeneser
Ebikeneser

Reputation: 2364

Select all checkboxes in grid view

I Have the following grid view -

<asp:GridView ID="group_table" Runat="server" 
    AutoGenerateColumns="False" onprerender="group_table_PreRender" 
    onrowdatabound="group_table_RowDataBound"
    ClientIDMode="Static"  CellPadding="4" ForeColor="#333333" 
    GridLines="None" Width="915px" BorderStyle=Ridge >
    <AlternatingRowStyle BackColor="White" />

    <Columns>
    <asp:TemplateField ItemStyle-Width=90>
       <HeaderTemplate>
           <asp:CheckBox ID="selectAllCheckBox" runat="server" Text="Select all"/>
       </HeaderTemplate>
     <ItemTemplate>

       <asp:CheckBox ID="selectCheckBox" runat="server"/>


     </ItemTemplate>

  </asp:TemplateField>

And have tried to implement the following javascript function so that when a user clicks selectAllCheckBox all checkboxes will be checked -

 $(document).ready(function() {

  var headerCheckbox = $('#group_table > tbody > tr > th > input:checkbox');

  headerCheckbox.click(function() {
     var headerChecked = $(this).attr('checked');
     var rowCheckboxes = $('#group_table > tbody > tr > td > input:checkbox');
     rowCheckboxes.attr('checked', headerChecked);
  }); 

});

But for some reason this is having no affect, where am I going wrong?

Upvotes: 2

Views: 397

Answers (3)

yogi
yogi

Reputation: 19591

If I were you, I would have done it this way

<asp:GridView ID="group_table" runat="server" AutoGenerateColumns="False" ClientIDMode="Static"
        CellPadding="4" ForeColor="#333333" GridLines="None" Width="915px" BorderStyle="Ridge">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
            <asp:TemplateField ItemStyle-Width="90">
                <HeaderTemplate>
                    <asp:CheckBox ID="selectAllCheckBox" runat="server" Text="Select all" onclick="toggleChecks(this);" />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="_CheckBox" runat="server" CssClass="psudoClass" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
</asp:GridView>

Add a psudoClass to the checkboxes to be checked, and do this

function toggleChecks(sender) {
   $(".psudoClass").each(function (index, item) {
        item.children[0].checked = sender.checked;
   });
}

Upvotes: 1

Mathew Thompson
Mathew Thompson

Reputation: 56429

As stated in my comment to the question (which you stated was correct), you have the selector for the headerCheckbox variable wrong. Table headings are in the thead not the tbody. Try this:

var headerCheckbox = $("#group_table > thead > tr > th > input:checkbox");

Upvotes: 1

Iftah
Iftah

Reputation: 9572

I don't know how asp:GridView generates the html, but maybe the problem is you add the click handler on tbody > tr > th instead of thead > tr > th ?

Upvotes: 0

Related Questions