How to select all checkboxes in Datalist using Javascript in ASP.NET?

In this article I will explain how to select all records in Datalist using Javascript.

When we click “Select all” checkbox, all item will get selected. If we unselect one of record, then “Select all” checkbox will get unselected.

Following script is used to select all Items in Datalist:

<script type="text/javascript">

    $(function () {

        $("[id*=chkHeader]").click(function () {

            if ($(this).is(":checked")) {

                $("[id*=dlStudent] [id*=chkRow]").attr("checked", "checked");

            } else {

                $("[id*=dlStudent] [id*=chkRow]").removeAttr("checked");

            }

        });

        $("[id*=dlStudent] [id*=chkRow]").click(function () {

            if ($("[id*=dlStudent] [id*=chkRow]").length == $("[id*=dlStudent] [id*=chkRow]:checked").length) {

                $("[id*=chkHeader]").attr("checked", "checked");

            } else {

                $("[id*=chkHeader]").removeAttr("checked");

            }

        });

    });

</script>

1.     DataList design:

    <fieldset style="width:350px"><legend><strong>Select all Items in DataList</strong></legend>

    <div>

    <asp:CheckBox ID = "chkHeader" runat="server" Text = "Select All" />

<hr />

<asp:DataList ID="dlStudent" runat="server" Width="340px" RepeatColumns="2" >

    <ItemTemplate>

        <table style="border:dotted 1px; width:150px">

            <tr>

                <th colspan = "3" align = "left" style="background:#850414; color:#ffffff" >

                    <asp:CheckBox ID="chkRow" runat="server" Font-Bold = "true" Text = '<%# Eval("Student_Name")%>' />

                </th>

            </tr>

            <tr>

                <td>Student id</td>

                <td><%#Eval("Student_Id")%></td>

            </tr>

                <tr>

                <td>Class</td>

                <td><%#Eval("class")%> </td>

            </tr>

        </table>

    </ItemTemplate>

</asp:DataList>

    </div></fieldset>

2.     Asp.Net Code using C#:

public partial class DataList : System.Web.UI.Page

{

    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            Fill_DATALIST();

        }

    }

    //Fetch data from database and bind to Datalist

    public void Fill_DATALIST()

    {

        if (con.State == ConnectionState.Open)

        {

            con.Close();

        }

        con.Open();

        DataSet ds = new DataSet();

        SqlCommand cmd = new SqlCommand();

        cmd.Connection = con;

        cmd.CommandText = "Fill_Dataset";

        cmd.CommandType = CommandType.StoredProcedure;

        SqlDataAdapter dataadapater = new SqlDataAdapter();

        dataadapater.SelectCommand = cmd;

        dataadapater.Fill(ds);

        dlStudent.DataSource = ds;

        dlStudent.DataBind();

        cmd.Dispose();

        con.Close();

    }

}