jQuery check uncheck all checkboxes in gridview

In this post we will see how to check and uncheck checkboxes in the gridview. We will check and uncheck checkboxes at client side in gridview using jquery. First we will add check boxes to gridview like:

Gridview with checkboxes

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderWidth="1px"
      CellPadding="3" BorderStyle="None" Font-Names="Arial">
      <FooterStyle></FooterStyle>
      <PagerStyle HorizontalAlign="Left"></PagerStyle>
      <HeaderStyle Font-Bold="True"></HeaderStyle>
      <Columns>
        <asp:TemplateField HeaderText="Select">
          <HeaderTemplate>
            <asp:CheckBox ID="checkAll" runat="server" Text="" onclick="javascript:CheckUnCheckAll(this);" />
          </HeaderTemplate>
          <ItemTemplate>
            <asp:CheckBox ID="CheckBoxPurchase" runat="server" Enabled="true" />
          </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField HeaderText="Item No." DataField="ItemNo">
          <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField HeaderText="Item Name" DataField="ItemName">
          <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
        </asp:BoundField>
      </Columns>
    </asp:GridView>

Here in above code we have gridview with one checkbox in header and checkboxes for all the rows. Now we have to check all the checkboxes in gridview rows when header checkbox is checked and when header checkbox is unchecked all checkbox get unchecked. Now we have to access gridview object in jquery.

$('#<%=GridView1.ClientID %>')

In order to get and perform check-uncheck operation on checkboxes we have to call Javascript function from header checkbox of the gridview and in that function we will find all row checkboxes like:

 $('#<%=GridView1.ClientID %>').find("input:checkbox")

Now by iterating through each checkbox item we can assign header checkbox's checked status to all other checkboxes.

Iterate through gridview checkboxes to check uncheck checkboxes

<script type="text/javascript">
  function CheckUnCheckAll(chk) {
     $('#<%=GridView1.ClientID %>').find("input:checkbox").each(function () {
          if (this != chk) {
              this.checked = chk.checked;
            }
           });
      }
 </script>

Example to check-uncheck all checkboxes in gridview

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <title>Check all checkboxes in gridview using jQuery</title>
    <script type="text/javascript">
        function CheckUnCheckAll(chk) {
            $('#<%=GridView1.ClientID %>').find("input:checkbox").each(function () {
                if (this != chk) {
                    this.checked = chk.checked;
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BorderWidth="1px"
            CellPadding="3" BorderStyle="None" Font-Names="Arial">
            <FooterStyle></FooterStyle>
            <PagerStyle HorizontalAlign="Left"></PagerStyle>
            <HeaderStyle Font-Bold="True"></HeaderStyle>
            <Columns>
                <asp:TemplateField HeaderText="Select">
                    <HeaderTemplate>
                        <asp:CheckBox ID="checkAll" runat="server" Text="" onclick="javascript:CheckUnCheckAll(this);" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBoxPurchase" runat="server" Enabled="true" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="Item No." DataField="ItemNo">
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField HeaderText="Item Name" DataField="ItemName">
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
                </asp:BoundField>
            </Columns>
        </asp:GridView>
        <input type="button" id="submit" value="Submit" />
    </div>
    </form>
</body>
</html>

0 Comments :

Post a Comment