使用Jquery选择或取消选择ListView中的所有复选框

Select or deselect all checkboxes within a ListView using Jquery

本文关键字：选择 复选框 ListView Jquery 取消 使用      更新时间：2023-09-26

我有一个带有复选框的列表视图，我想在列表视图外的复选框的复选框更改中选择或取消选择所有复选框。

以前我使用网格视图，我的网格视图代码是：

<script language="javascript" type="text/javascript">
    function CheckAll(element) {
           var type = false;
           if (element.getElementsByTagName('input')[0].checked)
               type = true;
           var tbl = document.getElementById('<%=gdvContactDirectory.ClientID %>');
           for (var i = 0; i < tbl.rows.length; i++) {
               try {
                   var el = $(tbl.rows[i]).find('input[type="checkbox"]')[0];
                   el.checked = type;
               } catch (e) { }
           }
       }

但在我切换到列表视图之后，所以现在我想要列表视图的相同功能。

我的列表视图如下：

  <asp:ListView ID="listViewContacts" runat="server" RepeatDirection="Horizontal" ClientIDMode="Static"
        RepeatColumns="4">
        <LayoutTemplate>
            <asp:PlaceHolder ID="itemplaceholder" runat="server" />
        </LayoutTemplate>
        <ItemTemplate>
            <div class="ContactDirectory ">
                <div class="Padding5">
                    <table width="100%" border="0" cellspacing="0" cellpadding="5" class="TableBorder2">
                        <tr>
                            <td class="BorderBottomGreen" colspan="2" valign="top">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="62%" valign="top">
                                            <span class="NormalTextBig">
                                                <asp:Label ID="lblFullName" runat="server" Text='<%#Bind("FullName")%>'></asp:Label></span>
                                        </td>
                                        <td width="38%" valign="top" align="right" class="FontColor1">
                                            <strong>
                                                <asp:Label ID="lblCategory" runat="server" Text='<%#Bind("Category")%>'></asp:Label></strong>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="100%" align="left">
                                            <span class="NormalTextBig">
                                                <asp:Label ID="lblOrganization" runat="server" Font-Size="Smaller"></asp:Label>
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:Label ID="lblContactDetails" runat="server" Text=""></asp:Label><br>
                                <asp:Label ID="lblAddress" runat="server" Text='<%#Bind("Address")%>'></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td class="AltColor22 SmallerText" colspan="2">
                                <strong>Remark</strong>:
                                <asp:Label ID="lblRemark" runat="server" Text='<%#Bind("Remark")%>'></asp:Label><br>
                            </td>
                        </tr>
                        <tr>
                            <td align="left" width="50%">
                                <asp:HiddenField ID="hfContactID" runat="server" Value='<%# Bind("ContactID") %>' />
                                <asp:CheckBox ID="chkPrint" Font-Size="16" runat="server" Style="float: left" ToolTip="Select for Print" />
                            </td>
                            <td align="right" width="50%">
                                <asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="Images/delete_icon.png"
                                    ToolTip="Delete" CommandName="Delete_" CommandArgument='<%#Bind("ContactID")%>'
                                    OnClientClick="return ConfirmDelete();" Style="max-width: 16px; min-width: 16px" />
                                &nbsp;
                                <asp:ImageButton ID="ImgBtnEdit" runat="server" ImageUrl="images/Edit.png" CommandName="Edit_"
                                    ToolTip="Edit" CommandArgument='<%# Bind("ContactID") %>' Style="max-width: 16px;
                                    min-width: 16px" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </ItemTemplate>
    </asp:ListView>

如果有人找到答案，请把它和代码放在一起。

以下是您必须执行的操作：

  1. 在页眉模板中或列表视图范围之外添加复选框。这将是您选择/取消选择所有复选框。为该复选框指定一个唯一的css类（此处为"selectall"）。

  2. 在您的列表框中，将一个css类添加到您的复选框中（我使用了"selectone"）。

  3. 在aspx页面上复制以下jquery脚本片段，以选择/删除复选框。

    $(function() {    
    // Select deselect all
    $('.selectall').click(function() {
      if ($(this).is(':checked')) {
          $('.selectone').prop('checked', true);
      } else {
          $('.selectone').prop('checked', false);
      }
  });  
  // Update select all based on individual checkbox 
  $('.selectone').click(function() {
      if ($(this).is(':checked')) {
        if ($('.selectone:checked').length == $('.selectone').length) {
            $('.selectall').prop('checked', true);
            } else {
            $('.selectall').prop('checked', false);
        }          
      } else {
          $('.selectall').prop('checked', false);
      }
  });  
});

以下是fiddler中的完整示例：https://jsfiddle.net/tejsoft/wdz5v1qk/5/

相关文章：