Check or uncheck all Checkboxes in Repeater Control using Javascript or jquery in ASP.NET.

In this article I will explain how to check all check boxes in Repeater Control using JavaScript.

When we click on header check box then all checkboxes will be checked and if one of the checkbox is unchecked then Header will also be unchecked. If we check all checkboxes then Header checkbox will automatically checked.

Following script is used to select all Items in Repeater:

<script type="text/javascript">

    $(function () {

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

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

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

            } else {

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

            }

        });

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

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

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

            } else {

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

            }

        });

    });

</script>

1.     Repeater  design:

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

    <div>

   

<asp:Repeater ID="rptStudent" runat="server">

    <HeaderTemplate>

        <table id="tblStudent" style="border:dotted 1px">

            <thead>

                <tr>

                    <th><asp:CheckBox ID="chkHeader" runat="server" /></th>

                    <th>Student Id</th>

                    <th>Student Name</th>

                    <th>Age</th>

                    <th>Class</th>

                </tr>

            </thead>

    </HeaderTemplate>

    <ItemTemplate>

        <tbody>

            <tr>

                <td><asp:CheckBox ID="chkRow" runat="server" /></td>

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

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

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

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

            </tr>

        </tbody>

    </ItemTemplate>

    <FooterTemplate>

        </table>

    </FooterTemplate>

</asp:Repeater>

    </div></fieldset>

2.     Asp.Net Code using C#:

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 gridview

    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);

        rptStudent.DataSource = ds;

        rptStudent.DataBind();

        cmd.Dispose();

        con.Close();

    }