lakshmi sowmya

lakshmi sowmya

  • NA
  • 76
  • 102k

Check & Uncheck chkboxes in nested repeaters using Jquery

Sep 2 2013 8:09 AM
Hi,

        In our Appln we have two nested repeater controls.the parent control had parent chkboxes.and the child repeater had child subcategory check boxes.we need select and deselect all child chk boxes when a parent chkbox is selected and vice-versa..and even if a single child chkbox is selected we need check the parent checkbox......Using Jquery/JavaScript..
          the following jquery i used but its not working ..all the child checkboxes of all categories are getting selected or deselected when any single parent category chkbox is checked.

$(document).ready(function () {
         //This will add one function to be called on every request of the update panel
          Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
         //initiateCheckAllBinding();
     });

     function EndRequestHandler() {
        var allCheckbox = $("#allCheckbox input[id*='chkSelectAll']");
        var checkboxes = $("#Subcategory input[id*='chkChild']");
        alert(allCheckbox);
            allCheckbox.click(function (e) {
                alert("123");
                checkboxes.attr('checked', allCheckbox.is(':checked'));

            });
            checkboxes.click(function (e) {
                alert("321");
                var rowCheckBoxSelected = $("#RepeaterTable input[id*='chkChild']:checked");
                if (rowCheckBoxSelected) {
                    allCheckbox.attr("checked", false);
                }
                else {
                    allCheckbox.attr("checked", true);
                }
             
            });
----------------------------------------------------------------------------------------------------------------------------

<asp:UpdatePanel ID="upn" runat="server" >
                                <ContentTemplate>
                                    <asp:Panel ID="pnl" runat="server" ScrollBars="Vertical" Height="300px" Width="900">
                                        <%--<div style="height: 300px; width: 499px;">--%>
                                        <table width="850" Id="RepeaterTable">
                                            <asp:Repeater ID="Categories" runat="server">
                                                <ItemTemplate>
                                                    <tr>
                                                        <td width="50">
                                                            <asp:ImageButton ID="PluseBT" runat="server" ImageUrl="~/App_Images/Expander.png"
                                                                CommandArgument='<%#Eval("Category_Id") %>' Visible="true" Height="16px" CommandName="_Show"
                                                                OnClick="PlusBT_OnClick" />
                                                        </td>
                                                        <td width="350">
                                                            <asp:Label ID="Label1" runat="server" Text='<%#Eval("Category_Name") %>' Font-Bold="True"></asp:Label>
                                                            <asp:HiddenField ID="CategoryID" runat="server" Value='<%#Eval("Category_Id") %>' />
                                                        </td>
                                                       
                                                        <td align="left" width="50" id="allCheckbox">
                                                            <asp:CheckBox ID="chkSelectAll" runat="server"  OnCheckedChanged="chkSelectAll_OnCheckedChanged" />
                                                        </td>
                                                    </tr>
                                                    <asp:Repeater ID="Subcategories" runat="server">
                                                        <ItemTemplate>
                                                            <tr>
                                                                <td>
                                                                    &nbsp;.<asp:HiddenField ID="subCategoryID" runat="server" Value='<%#Eval("Subcategory_id") %>' />
                                                                </td>
                                                                <td>
                                                                    <asp:Label ID="Subcategory_Name" runat="server" Text='<%#Eval("Subcategory_Name") %>'
                                                                        Width="200" />
                                                                </td>
                                                               
                                                                <td align="left" class="singleCheckbox" id="Subcategory">
                                                                    <asp:CheckBox ID="chkChild" runat="server"/>
                                                                </td>
                                                            </tr>
                                                        </ItemTemplate>
                                                    </asp:Repeater>
                                                </ItemTemplate>
                                            </asp:Repeater>
                                        </table>
                                                    
                                    </asp:Panel>
                                   </ContentTemplate>
                             </asp:UpdatePanel>

-----Also we have expand and Collapse image buttons...any help for checking and unchecking check boxes  using jquery or javascript....right now we are doing this in back end.

Answers (2)