Not able to check and uncheck the checkboxes insid

问题:

I am using telerik Radcombobox and in that radcombobox i am using some checkbox like this:

But i am not able to check and uncheck the checkboxes which are inside the radcombox.

<telerik:RadComboBox ID="rad1" runat="server" Width="200" Font-Names="Arial" DropDownWidth="460"
        AutoPostBack="true" EmptyMessage="Select Action Type(s)" EnableScreenBoundaryDetection="false" OffsetX="-0">
            <HeaderTemplate>
                  <div class="header">
                             <asp:CheckBox ID="selectAll" CssClass="All" runat="server" Text="Select All" />
                    </div>

                   ---------Section 1 -----------
     <ul>
    <div id="section1" class="section">
                 <li class="carousel-border">
                       <asp:CheckBox ID="chkParent1" CssClass="section1parent" runat="server" Text="Check All" /> --Parent of below 2 checkboxes
                  </li>
                   <li>
                        <asp:CheckBox ID="chkchild1" CssClass="section1child" runat="server" Text="Child 1" />
                    </li>
                      <li>
                           <asp:CheckBox ID="chkchild2" CssClass="section1child" runat="server" Text="Child 2" />
                      </li>                                
           </div>

---------Section 2 -----------
    <div id="section2" class="section">
                 <li class="carousel-border">
                       <asp:CheckBox ID="chkParent2" runat="server" Text="Check all" /> --Parent of below 2 checkboxes
                  </li>
                   <li>
                        <asp:CheckBox ID="chkchild3" runat="server" Text="Child 3" />
                    </li>
                      <li>
                           <asp:CheckBox ID="chkchild4" runat="server" Text="Child 4" />
                      </li>                                
           </div>
           </ul>

             </HeaderTemplate>
  </telerik:RadComboBox>

--This is for section 1----
 This is on check of section1 CheckAll 


 $("#section1 .section1parent").change(function () {
                    $(this).closest('.section').find(':checkbox').prop('checked', this.checked);
                });

But my two checkbox i.e chkchild1 and chkchild2 are not getting checked.

I guess the reason could be the find function isnt able to find the checkbox as because checkbox are under radcombox.

Can anybody tell me why this is happening and whats the solution for this??

回答1:

Without seeing the output HTML, it is nearly impossible to see where this is going wrong. I would check the validity of your HTML code (make sure everything is closed). It works great in a test scenario as is:

https://jsfiddle.net/9ryeqgn7/

$(function () {
            $("#section1 .section1parent").change(function () {
                $(this).closest('.section').find(':checkbox').prop('checked', this.checked);
            });
        });

As I see it, you have everything correct, even given that it is a Telerik control.

You may want to wrap the function in a $(function(){}) just to make sure it runs after the DOM is completely loaded (see fiddle).

Wow, it's getting hard to post things with code and links these days...

As an aside, from an html perspective, I don't like the div buried in the ul approach, but I see what you did there. Perhaps instead of the div, you could use a class for each li that groups them together?

回答2:

You can enable the CheckBox mode by setting the RadComboBox's CheckBoxes property to "true" instead of using HeaderTemplate. Also you can handle the events in OnClientItemChecking and OnClientItemChecked respectively.

Please refer to the following documentation for more. http://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/functionality/checkbox-support