Select All CheckBoxes in GridView ASP.NET using JQuery

Question

I have checkBoxes in my Gridview templete columns called "Category A" and "Category B". I want Select-All functionality, i.e. when the user checks the Select-All check Box in category A column, all the checkboxes must get checked under that column. Same for Category B. I am trying with the code below. The problem with my code is, it selects all the check boxes in the entire gridview, "Category A" as well as "Category B"s checkboxes. But, I want only checkboxes selected under the same column.

 function SelectAllCheckboxesA(chk) {
                $('#<%=gvSurveys.ClientID %>').find("input:checkbox").each(function() {
                    if (this != chk) {
                        if ($(this).hasClass('CatA') != false) {
                            this.checked = chk.checked;
                        }
                    }
                    else {
                        alert($(this));
                    }
                });
            }




 <asp:GridView ID="gvSurveys" runat="server" AutoGenerateColumns="false" AllowSorting="True" Width="1500px">
                           <Columns>
                              <asp:TemplateField>
                                 <HeaderTemplate>Category A
    <asp:CheckBox ID="chkSelectAllCatA" runat="server" Visible="false" onclick="javascript:SelectAllCheckboxesA(this);" CssClass="SACatA" />
    </HeaderTemplate>
    <ItemTemplate>
    <asp:CheckBox ID="chkCatA" runat="server" Enabled="false" CssClass="CatA"  />
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
    <HeaderTemplate>
    Category B
    <asp:CheckBox ID="chkSelectAllCatB" runat="server" Visible="false" CssClass="CatB" onclick="javascript:SelectAllCheckboxesB(this);" />
    </HeaderTemplate>
    <ItemTemplate>
    <asp:CheckBox ID="chkCatB" runat="server" Enabled="false" />
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>

For the love of puppies format your code properly (and accept some answers). — Roman
– Roman, Commented May 18, 2010 at 13:38
@ROMAN - only 4 eligible questions and 16 rep points. You might want to cut him a little slack and just point out how the system works. — tvanfosson
– tvanfosson, Commented May 18, 2010 at 13:44
@tvanfosson: and registered user for 3 months. FAQ is there for a reason. — Roman
– Roman, Commented May 19, 2010 at 3:07

Califf · Accepted Answer · 2012-01-21 18:35:19Z

12

This is based on solution proposed by Ashish Patil with some modifications to clear checkbox in the header row when any of the checkboxes in grid rows is unchecked.

In GridView create a template column:

<asp:templatefield>
<headertemplate>
  <asp:CheckBox ID="chkSelectAll" cssclass="chkHeader" runat="server" />
</headertemplate>
<itemtemplate>
  <asp:CheckBox ID="chkSelect" cssclass="chkItem" runat="server"/>
</itemtemplate>
</asp:templatefield>

jquery script, put it in $(document).ready for example:

var headerChk = $(".chkHeader input");
var itemChk = $(".chkItem input");

headerChk.click(function () { 
 itemChk.each(function () { 
  this.checked = headerChk[0].checked; }) 
});

itemChk.each(function () {
  $(this).click(function () {
    if (this.checked == false) { headerChk[0].checked = false; }
  })
});

answered Jan 21, 2012 at 18:35

Califf

5056 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PeterFromCologne · Accepted Answer · 2010-05-18 13:37:45Z

1

Why don't you select only the Checkboxes of CategoryA:

$('#<%=gvSurveys.ClientID %>').find("input:checkbox[Id*=chkCatA]")

Would that work?

answered May 18, 2010 at 13:37

PeterFromCologne

10.5k10 gold badges43 silver badges50 bronze badges

2 Comments

Roman Over a year ago

Since he's adding CatA class to the checkboxes, a class selector would work too (and look simpler).

dexter Over a year ago

No this didn't help. I tried to specifically mention "input:checkbox[Id*=chkCatA]".

tvanfosson · Accepted Answer · 2010-05-18 13:43:11Z

0

Change the selectAll checkboxes to have the same class. Then extract the class from the checkbox and use it as part of the selector, filtering out the select. This will simplify things a lot since you know that all the matched inputs will simply need to get the checked value from the parameter.

function SelectAllCheckboxesA(chk) {
    var $chk = $(chk);
    var myClass = $chk.attr('class');
    $('#<%=gvSurveys.ClientID %>')
       .find("input." + myClass + ":checkbox" )
       .not($chk)
       .attr('checked', $chk.attr('checked') );  
}

answered May 18, 2010 at 13:43

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

2 Comments

dexter Over a year ago

Hi thank you for reply. This has the same effect , all the checkboxes get selected in the entire Gridview.

tvanfosson Over a year ago

@dexter - Then you've got something wrong in your code. If the checkboxes in the header have different classes (from each other) and those classes match the ones in the column, this should work. The selector is specific to the class and will not select any checkboxes that don't have that class.

Aravind · Accepted Answer · 2012-01-09 00:50:25Z

0

$('#<%=gvSurveys.ClientID %>').find('input[Id*="chkCatA"]:checkbox').each(function() {
            if (this != chk) {
                this.checked = chk.checked;
            }
        });

edited Jan 9, 2012 at 0:50

user142162

answered Jan 14, 2011 at 16:36

Aravind

3202 silver badges10 bronze badges

Comments

Neha Verma · Accepted Answer · 2014-10-29 21:13:41Z

Create the row with a checkbox in the header:

<asp:TemplateField HeaderText="Merged Client">
                <HeaderTemplate>
                   <asp:CheckBox ID="chkboxSelectAll" runat="server" AutoPostBack="true" OnCheckedChanged="chkboxSelectAll_CheckedChanged" ></asp:CheckBox> Merged Client
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckMergedClient" **runat="server"** **onclick="CheckChanged()" OnCheckedChanged="CheckMergedClient_CheckedChanged"** **AutoPostBack="true"** value='<%# Eval("ClientId") %>'/>                                 </ItemTemplate>
</asp:TemplateField>

In code behind add the OnCheckChanged event handler to select or deselect all :

protected void chkboxSelectAll_CheckedChanged(object sender, EventArgs e)
    {
        CheckBox ChkBoxHeader = (CheckBox)ClientMatchGridView.HeaderRow.FindControl("chkboxSelectAll");
        foreach (GridViewRow row in ClientMatchGridView.Rows)
        {
            CheckBox ChkBoxRows = (CheckBox)row.FindControl("CheckMergedClient");
            if (ChkBoxHeader.Checked == true)
            {
                ChkBoxRows.Checked = true;
            }
            else
            {
                ChkBoxRows.Checked = false;
            }
        }
    }

Collectives™ on Stack Overflow

Select All CheckBoxes in GridView ASP.NET using JQuery

5 Answers 5

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related