how to check all box of a repeater control by checking header checkbox in c#.net

Question

[I have four column if anyone check header check box[for example "view" checkbox check] then all checkbox in "view" column should get checked]

This IS my repeater control design


   <div class="form-row">
                    <asp:Repeater ID="rptMenu" OnItemDataBound="rptMenu_ItemDataBound" runat="server">
                        <HeaderTemplate>
                            <table id="tblCustomers" class="table table-bordered ">
                                <thead>
                                    <tr>

                                        <th style="display: none">SRNO</th>
                                        <th style="width: 20%">Menu</th>
                                        <th style="width: 6%">View  <asp:CheckBox  id="checkView" runat="server" OnCheckedChanged="checkView_CheckedChanged"> </asp:CheckBox > </th>
                                        <th style="width: 6%">Add    <input type="checkbox" id="checkAdd" runat ="server" /></th>
                                        <th style="width: 6%">Edit    <input type="checkbox" id="CheckEdit" runat ="server" /></th>
                                        <th style="width: 6%">Delete    <input type="checkbox" id="CheckDelete" runat ="server" /></th>
                                    </tr>
                                </thead>
                                <tbody>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <tr>

                                <td style="display: none"><%#Eval("SRNO")%></td>

                                <td>
                                    <label id="lblMenuName" runat="server"><%#Eval("MenuName")%></label>
                                    <input type="text" value='<%#Eval("MenuCode")%>' id="txtMenuCode" runat="server" style="display: none;" />
                                    <input type="text" value='<%#Eval("MenuName")%>' id="txtMenuName" runat="server" style="display: none" />

                                </td>
                                <td>
                                    <input type="checkbox" id="chkView"  runat ="server" /></td>
                                <td>
                                    <input type="checkbox" id="chkAdd" runat="server" /></td>

                                <td>
                                    <input type="checkbox" id="chkEdit" runat="server" /></td>
                                <td>
                                    <input type="checkbox" id="chkDelete" runat="server" /></td>
                            </tr>
                        </ItemTemplate>
                        <FooterTemplate>
                            </tbody>
                                                                  </table>
                        </FooterTemplate>
                    </asp:Repeater>
                </div>

(https://i.sstatic.net/utFyy.png)

I have try by checkView_CheckedChanged event but it didn't work well...

Answer 1

Try do this with Javascript and JQuery,

first, add a function in headers with Column Id paramenter and the state of checkbox: onclick="checked(1, this.checked)"

<input type="checkbox" onclick="checked(1, this.checked)" id="checkAdd" runat ="server" />

And in all checkbox from the body, add class checkbox_c1 where c1 is column1. Like that:

<input type="text" value='<%#Eval("MenuName")%>'  class="checkbox_c1" id="txtMenuName" runat="server" style="display: none" />

Now, we write script in javascript with jquery:

<script>
    function checked(columnId, changeTo){
       $('.column_c' + columnId).prop('checked', changeTo);
</script>