Select all option for Gridview with checkbox using JQuery

Hi, 
Select and unselect all the Gridview records using Checkbox using Client side JQuery, here Select all option is Associated to select all the rows in Current page of the Gridview. Here I used Class name as a JQuery selector to select and deselect the records. Template field in Gridview is necessary to insert a Control inside the Gridview. Use HTML Control rather than ASP control to get the selected Checkbox value of the Gridview.

output preview :
ASP.NET CODE :

<html>

<head runat="server">

    <title>Copyright @Fourthbottle</title>

    <script src="Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        function Selectallcheckbox(e) {
            if (e.checked) {
                $(".checkboxselection").prop("checked", true)
            }
            else {
                $(".checkboxselection").prop("checked", false)
            }
        }

        function SelectallColorsForStyle(e, eval) {
            if (e.checked) {
                if (!$('input.checkboxselection[type=checkbox]:not(:checked)').length)
                    $("#CHK_STY_ALL").prop("checked", true);
            }
            else {
                $("#CHK_STY_ALL").attr("checked", false);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table width="100%">
            <tr>
                <td align="center">
<asp:GridView ID="grd" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">

<HeaderTemplate>SELECT ALL<br />
<asp:CheckBox ID="CHK_STY_ALL" runat="server" ClientIDMode="Static" onclick="javascript:Selectallcheckbox(this);"/>
</HeaderTemplate>

<ItemTemplate>
<input type="checkbox" id="CHK_STY" runat="server" onchange="javascript:SelectallColorsForStyle(this,this.value);"                                        class="checkboxselection" value='<%#Eval("Brand")%>' />
</ItemTemplate>

</asp:TemplateField>
<asp:BoundField HeaderText="BRAND" ItemStyle-Width="90px" DataField="Brand" />
<asp:BoundField HeaderText="MODEL" ItemStyle-Width="90px" DataField="Model" />
<asp:BoundField HeaderText="TYPE" ItemStyle-Width="90px" DataField="Type" />
<asp:BoundField HeaderText="PRICE" ItemStyle-Width="90px" DataField="Price" />
</Columns>
</asp:GridView>
</td>
</tr>
</table>
<asp:Label ID="lblstatus" ClientIDMode="Static" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
 

C# CODE: 
using System;

using System.Collections.Generic;

using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

namespace GRD_Merge_Paging
{
    public partial class GRD_selectall : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            SqlConnection con = new SqlConnection("Connection string");
            string Query = "select top 12 * from Table1 order by Brand desc";
            SqlDataAdapter da = new SqlDataAdapter(Query, con);
            DataSet DS = new DataSet();
            try
            {
                con.Open();
                da.Fill(DS);
                grd.DataSource = DS;
                grd.DataBind();
                con.Close();
            }
            catch (Exception es)
            {
                lblstatus.Text = es.Message.ToString();
            }
        }
     
    }
}