Question

我有一个列表视图，其中有转发器，列表视图像手风琴一样显示，有一个复选框，当我单击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>

我写了这个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>

Answer 1

尝试此操作：您必须在更改事件处理程序上注册以选中所有复选框，并根据其所有其他复选框的值进行检查/取消选中

请注意，您使用其他复选框的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
     });
});

Answer 2

我使用了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);
                });
            }

        });

在列表视图（asp.net）中通过Jquery选中了所有复选框

2 个答案: