Checkbox Check all Gridview

Checkbox Check all Gridview



    Below code will let you select all checkboxes contained inside the page on click of header checkbox.

Let's see how it works

HTML Code:

<div>

<input type="checkbox" id="headercheckbox" class ="myHeaderCheckBoxCss" checked="checked" />

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="myItemCheckBoxCss" >

<asp:ListItem>Mobile</asp:ListItem>

<asp:ListItem>3G</asp:ListItem>

<asp:ListItem>GSM</asp:ListItem>

<asp:ListItem>SMS</asp:ListItem>

<asp:ListItem>GPS</asp:ListItem>

<asp:ListItem>GPRS</asp:ListItem>

<asp:ListItem>BODY</asp:ListItem>

<asp:ListItem>SIM</asp:ListItem>

<asp:ListItem>WAP</asp:ListItem>

<asp:ListItem>MMS</asp:ListItem>

</asp:CheckBoxList>

</div>

<asp:Button ID="Button1" runat="server" Text="Go" />

In above code I have server side list items and one html checkbox. Look at the CssClass and class attributes of both controls.

<input type="checkbox" id="headercheckbox" class ="myHeaderCheckBoxCss" checked="checked" />


<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="myItemCheckBoxCss" >



For Header checkbox I have used myHeaderCheckBoxcss and for CheckBox Items I have used myItemCheckBoxCss. This will help me to find appropriate controls by 
class name using JQuery like

$(".myHeaderCheckBoxCss").click

Below is actual jQuery script whcih dose the job of checking all and deselecting all checkboxes for me. 

If somebody would like to use it just copy and paste the code into your head section of web page and give appropriate css names for Header checkbox and item checkboxes.
 

<head>
    <title></title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
   
    <script type="text/javascript" language="javascript">

        /* After loading JQuery library from content delivery network (CDN)  */

        $(document).ready(

        function ()
        {

            /* attach click event to header check box*/

            $(".myHeaderCheckBoxCss").click
            (
                    function ()
                    {
                        if ($(this).is(':checked'))
                        {
                            $(".myItemCheckBoxCss").attr('checked', 'checked');
                        }
                        else
                        {
                            $(".myItemCheckBoxCss").removeAttr('checked');
                        }
                    }
            );
                              

            $("input:checkbox").click
             (
               function ()
                {
                   if (!$(this).is(':checked'))
                   {
                         $(".myHeaderCheckBoxCss").removeAttr('checked');
                   }
                }
              );
        });
       

    </script>
</head>

Code Explanation:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

It loads the JQuery library from content delivery network (CDN). CDN servers has stored the common Jquery library at central place.
When browser look at the same path of .Js file soterd at his repository, it would not go and take new copy of Jquery .js file from CDN 
rather it would take it from its cash. for more information about CDN follow http://en.wikipedia.org/wiki/Content_delivery_network

$(".myHeaderCheckBoxCss").click


         This will find the elements whose Class name is myHeaderCheckBoxcss and it will attach function to its click event.

if ($(this).is(':checked'))

         It will check current status of that particular header check box.

$(".myItemCheckBoxCss").attr('checked', 'checked');


         If the current status is checked, find other item check boxes by its class name myItemCheckBoxCss and change its states to checked.

$(".myItemCheckBoxCss").removeAttr('checked');

        On uncheck, uncheck all items.

$(".myItemCheckBoxCss").removeAttr('checked');


The entire aspx code look like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
   
    <script type="text/javascript" language="javascript">

        /* After loading JQuery library from content delivery network (CDN)  */

        $(document).ready(

        function ()
        {

            /* attach click event to header check box*/

            $(".myHeaderCheckBoxCss").click
            (
                    function ()
                    {
                        if ($(this).is(':checked'))
                        {
                            $(".myItemCheckBoxCss").attr('checked', 'checked');
                        }
                        else
                        {
                            $(".myItemCheckBoxCss").removeAttr('checked');
                        }
                    }
            );
                              

            $("input:checkbox").click
             (
               function ()
                {
                   if (!$(this).is(':checked'))
                   {
                         $(".myHeaderCheckBoxCss").removeAttr('checked');
                   }
                }
              );
        });
       

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="checkbox" id="headercheckbox" class ="myHeaderCheckBoxCss" checked="checked" />
        <asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="myItemCheckBoxCss" >
            <asp:ListItem>Mobile</asp:ListItem>
            <asp:ListItem>3G</asp:ListItem>
            <asp:ListItem>GSM</asp:ListItem>
            <asp:ListItem>SMS</asp:ListItem>
            <asp:ListItem>GPS</asp:ListItem>
            <asp:ListItem>GPRS</asp:ListItem>
            <asp:ListItem>BODY</asp:ListItem>
            <asp:ListItem>SIM</asp:ListItem>
            <asp:ListItem>WAP</asp:ListItem>
            <asp:ListItem>MMS</asp:ListItem>
        </asp:CheckBoxList>
    </div>
    <asp:Button ID="Button1" runat="server" Text="Go" />
    </form>
</body>
</html>

The jQuery script above can be used for selecting all GridView items on header check box.

Tip:

1. To find the elements by its type use below sysntax 

    $("input:checkbox").click(... do something ...);

2. To find the element by its ID  use

   $("#headercheckbox").click(... do something ...);

Tags:

asp.net Gridview checkboxGridview select emailgridview add new rowJquery Gridview Dropdownlist Selected Change Enable Disable ControlsGridView RowGridView EditJQuery Radio Button CheckedHow to check image is loaded using JQueryJquery Radio Button CheckedGridview HyperlinkJQuery check if class exist

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.