Checkbox selection in gridview

In ASPX:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="CheckSelectAll" runat="server" Text="Select"  />
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CheckSelect" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
       </Columns>
    </asp:GridView>
    <br />
    <asp:Button runat="server" ID="btnDelete" Text="Button" OnClick="btnDelete_Click" />
    </form>
</body>

<script type="text/javascript">

    var gridView1Control = document.getElementById('<%= GridView1.ClientID %>');

    $('#<%= btnDelete.ClientID %>').click(function(e)
    {
        if ($('input:checkbox[id$=CheckSelect]:checked', gridView1Control).length)
        {
            return confirm('Are you sure you want to delete ?');
        }
        else
        {
            alert('Please select at lease one record.');
            return false;
        }

    });    
    
    
    $('input:checkbox[id$=CheckSelectAll]', gridView1Control).click(function(e)
    {
        if (this.checked)
        {
            $('input:checkbox[id$=CheckSelect]', gridView1Control).attr('checked', true);
        }
        else
        {
            $('input:checkbox[id$=CheckSelect]', gridView1Control).removeAttr('checked');
        }
    });



    $('input:checkbox[id$=CheckSelect]', gridView1Control).click(function(e)
    {
        //To uncheck the header checkbox when there are no selected checkboxes in itemtemplate
        if ($('input:checkbox[id$=CheckSelect]:checked', gridView1Control).length == 0)
        {
            $('input:checkbox[id$=CheckSelectAll]', gridView1Control).removeAttr('checked');
        }
        //To check the header checkbox when there are all selected checkboxes in itemtemplate
        else if ($('input:checkbox[id$=CheckSelect]:checked', gridView1Control).length == $('input:checkbox[id$=CheckSelect]', dataList1Control).length)
        {
            $('input:checkbox[id$=CheckSelectAll]', gridView1Control).attr('checked', true);
        }

    });




</script>

</html>

In Codebehind:

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;


    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {


            List<int> myTestList = new List<int>();

            for (int i = 0; i < 10; i++)
            {
                myTestList.Add(i);
            }

            GridView1.DataSource = myTestList;
            GridView1.DataBind();

        }
        protected void btnDelete_Click(object sender, EventArgs e)
        {
            //Do your stuff here

        }
    }

Checkbox selection in gridview

Checkbox selection in gridview

Posts under the topic: Checkbox selection in gridview