在listview（asp.net）中查看了Jquery的所有复选框

I have a Listview have repeater within it, the listview is display like accordion, there are a check box , I want to check all box in repeater when click on chkSelectAll.

我有一个Listview里面有转发器，listview显示像手风琴，有一个复选框，我想在点击chkSelectAll时检查转发器中的所有盒子。

enter code here
   <asp:ListView ID="lstSecurityFunction" runat="server"
       OnItemDataBound="lstSecurityFucntion_OnItemDataBound">
       <LayoutTemplate>
           <ul class="nav-accordion nav-roles" style="display: block;">
               <li runat="server" id="itemPlaceholder"></li>
           </ul>
       </LayoutTemplate>
       <ItemTemplate>
           <li>
               <span class="opener" runat="server" id="liModuleName">
                   <asp:CheckBox runat="server" ID="chkSelectAll" onClick="if($(this).is(':Checked'))isClick(this);"
                       moduleId='<%#Eval("ModuleID") %>' />
                   <asp:Label runat="server"> <%#CurrentLanquage==CspPortal.CspService.NotificationLanguages.English?Eval("EnModuleName"):Eval("ArModuleName")%></asp:Label>
                   <asp:HiddenField runat="server" Value='<%#Eval("ModuleID") %>' ID="hdnModuleId"></asp:HiddenField>
                   <i class="fa fa-angle-down"></i><i class="fa fa-angle-up"></i>
               </span>

               <div class="row">
                   <asp:Repeater ID="rpSecurityFunction" runat="server">
                       <ItemTemplate>
                           <div class="col-md-3" id="list" runat="server">
                               <asp:HiddenField ID="hdnData" runat="server" />
                               <asp:CheckBox ID="cbSecruityFunction" runat="server"

                                   fucntionId='<%# Eval("FunctionID") %>'
                                   name="reason" />
                           </div>
                       </ItemTemplate>
                   </asp:Repeater>
               </div>
           </li>
       </ItemTemplate>
   </asp:ListView>

I write this jquery code

我写这个jquery代码

<script> function isClick(s) {
    $(".nav-roles li ").find("input[id*='chkSelectAll']").each(function () {
    var isChecked =$(this).attr("checked");
           if (this.checked) {

               $('.nav-roles li .row .col-md-3').find("input[id*='cbSecruityFunction']").each(function () {
                   $(this).prop('checked', true);
               });}
       });
} </script>

2 个解决方案

#1

Try this:you have to register on change event handler for select all checkbox and make check / uncheck as per its value for all other checkboxes

试试这个：你必须在更改事件处理程序中注册select all复选框，并根据其所有其他复选框的值进行检查/取消选中

Please note that you have duplicate ids for other checkboxes which may create issue while using javascript or jquery. you need to changes it. I have selected other checkboxes using name.

请注意，您有其他复选框的重复ID，这可能会在使用javascript或jquery时产生问题。你需要改变它。我使用名称选择了其他复选框。

$(document).ready(function(){
    $(document).on('change',".nav-roles li span.opener input[type=checkbox]", function () {
        var isChecked =$(this).is(":checked");
        var $li = $(this).closest('li'); // get li parent
        $li.find('div.row input[type=checkbox]').prop('checked', isChecked); //find all other checkboxes and set check or uncheck
     });
});

#2

I used a jQuery accordion so it's work with this

我使用了一个jQuery手风琴，所以它可以用它

  $(document).ready(function () {

        $('.nav-roles li span.opener .chk-area').on('click', function () {
            var isChecked = $(this).hasClass("chk-checked");
            if (isChecked) {
                var $li = $(this).closest('li'); // get li parent
                $li.find('div.row input[id*="cbSecruityFunction"]').each(function() {
                    $(this).prev().removeClass("chk-checked");
                    $(this).parent().removeClass("active");
                    $(this).prev().addClass("chk-unchecked");
                    $(this).next().removeClass("chk-label-active");
                    $(this).prop("checked", false);
                });
            } else {
                var $li = $(this).closest('li'); // get li parent
                $li.find('div.row input[id*="cbSecruityFunction"]').each(function () {
                    $(this).prev().removeClass("chk-unchecked");
                    $(this).prev().addClass("chk-checked");
                    $(this).parent().addClass("active");
                    $(this).next().addClass("chk-label-active");
                    $(this).prop("checked", true);
                });
            }

        });

#1