Question

我有带复选框的列表视图，我想选中或取消选中复选框上的所有复选框，该复选框位于列表视图的外侧。

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

<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>

如果有人找到答案，请将其与代码一起使用。

Answer 1

以下是您需要做的事情：

在标题模板中或列表视图范围之外添加一个复选框。这将是您选择/取消选中所有复选框。给这个复选框一个唯一的css类（这里＆＃34; selectall＆＃34;）。
在您的列表框中为您的复选框添加一个css类（我使用了＆＃34; selectone＆＃34;）。

在您的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/

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

1 个答案: