Check Uncheck All Checkboxes in Gridview Using JQuery

Question

See more: C# ASP.NET jQuery

here not working in all check box on a single click in header check box

     <script type="text/javascript" language="javascript">
     function CheckAll(Checkbox) {
     var GridView1 = document.getElementById("<%=GridView1.ClientID %>");
     for (i = 1; i < GridView1.rows.length; i++) {
      GridView1.rows[i].cells[3].getElementsByTagName("INPUT")[0].checked       =Checkbox.checked;
       }}

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" Width="624px" CssClass="grid" 
        AllowPaging="True" AllowSorting="True" BackColor="White"  OnRowEditing="GridView1_RowEditing" OnRowCancelingEdit="GridView1_RowCancelingEdit"
        BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" PageSize = "5" 
        OnRowUpdating="GridView1_RowUpdating" DataKeyNames="id">         
            <Columns>
            <asp:TemplateField>
                &lt;HeaderTemplate>
        <asp:CheckBox ID="chkHeader" runat="server" onclick="CheckAll(this)"/>
            &lt;/HeaderTemplate>
            <ItemTemplate>
            <asp:CheckBox ID="chkchild" runat="server" />
            </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="id" HeaderText="id" SortExpression="id" InsertVisible="False" ReadOnly="True" />
                <asp:BoundField DataField="updatedby" HeaderText="updatedby" SortExpression="updatedby" />
            <asp:BoundField DataField="username" HeaderText="username" SortExpression="username" />
            <asp:BoundField DataField="password" HeaderText="password" SortExpression="password" />
            <asp:BoundField DataField="mail" HeaderText="mail" SortExpression="mail" />
 <asp:BoundField DataField="imagename" HeaderText="imagename" SortExpression="imagename" />
            <asp:ImageField DataImageUrlField="uploadimage" HeaderText="uploadimage" ControlStyle-Width = "80" ControlStyle-Height = "100">
            <ControlStyle Height="100px" Width="80px"></ControlStyle>
            </asp:ImageField>
     <asp:CommandField ShowEditButton="True" />
        </Columns>  
   </asp:GridView>

Shaharyar · Accepted Answer · 2014-11-01 08:07:50Z

1

checked is a bool type property.

You should assign true or false to it:

GridView1.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = true;

Also your Cell value should be 0 according to the aspx code.

edited Nov 1, 2014 at 8:07

answered Nov 1, 2014 at 7:41

Shaharyar

12.5k4 gold badges50 silver badges70 bronze badges

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

Comments

Mari · Accepted Answer · 2014-11-01 08:01:27Z

0

Change this line :

GridView1.rows[i].cells[3].getElementsByTagName("INPUT")[0].checked = Checkbox.checked;

with this

GridView1.rows[i].cells[0].getElementsByTagName("INPUT")[0].checked = Checkbox.checked;

answered Nov 1, 2014 at 8:01

Mari

2471 gold badge4 silver badges17 bronze badges

Comments

Vitox · Accepted Answer · 2014-11-01 08:41:57Z

(It will be easier if You had provided the rendered HTML)

$(function() {
    // Get your GridView, to restrict the "check/uncheck all" action only to this GridView (and don't mess up with another controllers in the page)
    var MainGridView = $('#GridView1');  // Set your GridView's Id

    // Bind Your Button to Check All CheckBoxes (Set the Id, or whatever CSS selector to match your CHECK ALL CHECKBOXES button)
    // This CSS selector applied to your needs will be '#chkHeader'. (Use only this piece of code, and do not bind the uncheck to this control too, otherwise it will check and uncheck all everytime)
    $('#ButtonCheckAllCheckBoxes').click(
        function () {
            MainGridView.find("input[type='checkbox']").prop('checked', true);
        }
    );


    // Bind Your Button to Uncheck All CheckBoxes (Set the Id, or whatever CSS selector to match your UNCHECK ALL CHECKBOXES button)
    $('#ButtonUncheckAllCheckBoxes').click(
        function () {
            MainGridView.find("input[type='checkbox']").prop('checked', false);
        }
    );
});

Collectives™ on Stack Overflow

Check Uncheck All Checkboxes in Gridview Using JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related