使用 javascript 在客户端的列表视图中选中所有复选框

Select All checkBox's in List View on client side using javascript

本文关键字：复选框 视图 列表 javascript 客户端 使用      更新时间：2023-09-26

我有一个列表视图，其中标题中有一个复选框。我想选中行中的所有复选框，如果选中/取消选中标题复选框。如何在客户端实现此目的？下面是列表视图设计代码。

<asp:ListView ID="lvTypes" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
    <LayoutTemplate>
        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
            <table id="DataTables_Table_0" class="table table-striped table-bordered bootstrap-datatable datatable responsive dataTable" aria-describedby="DataTables_Table_0_info">
                <thead class="box-header well" style="font-size: 12px !important;">
                    <tr role="row">
                        <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 50px;" aria-sort="ascending" aria-label="SNo: activate to sort column descending">S.No 
                        </th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 188px;" aria-label="Name: activate to sort column ascending">Name  
                        </th>                                                    
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 200px;" aria-label="Action: activate to sort column ascending">
                            <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true"  OnCheckedChanged="chkSelectAll_CheckedChanged" Text="Action"/>
                        </th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 188px;" aria-label="Employee ID: activate to sort column ascending">Desription 
                        </th>
                    </tr>
                </thead>
                <tbody role="alert" aria-live="polite" aria-relevant="all">
                    <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                </tbody>
            </table>
        </div>
    </LayoutTemplate>
    <GroupTemplate>
        <tr>
            <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
        </tr>
    </GroupTemplate>
    <ItemTemplate>
        <td style="text-align: center;">
            <%# Container.DataItemIndex + 1 %>
        </td>
        <td style="text-align: center;">
            <asp:CheckBox ID="cbDelProjectType" Checked="false" runat="server" />
            <a class="iframe2 cboxElement" href='<%# ResolveUrl("./Admin_EditPage.aspx?editTemplateId="+ Eval("id").ToString() ) %>'>
                <img src="./images/file_edit.png" alt="Edit Type" width="20px" height="20px" />
            </a>
        </td>
        <td style="text-align: center;">
            <%# Eval("title") %>
        </td>
        <td style="text-align: center;">
            <%# Eval("description") %>
        </td>
    </ItemTemplate>
</asp:ListView>

首先，将标题复选框更改为此复选框。我们不需要它来回发。

<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="false"  onchange="CheckAll(this);" Text="Action"/>

完成此操作后，请在标签中添加以下 javascript。

function CheckAll(checkid) {
            var updateButtons = $('#DataTables_Table_0 input[type=checkbox]');
            if ($(checkid).children().is(':checked')) {
                updateButtons.each(function () {
                    if ($(this).attr("id") != $(checkid).children().attr("id")) {
                        $(this).prop("checked", true);
                    }
                });
            }
            else {
                updateButtons.each(function () {
                    if ($(this).attr("id") != $(checkid).children().attr("id")) {
                        $(this).prop("checked", false);
                    }
                });
            }
        }

window.addEventListener("onload", function(){
   document.getElementById("DataTables_Table_0_wrapper").querySelector("thead").querySelector("input[type='checkbox']").addEventListener("click", checkTheBoxes, false);
}, false);
  function checkTheBoxes()
  {
     var checkIt;
     if (this.checked)
     {
        checkIt = true;
     }
     else
     {
        checkIt = false;
     }
     var checkboxes = document.getElementById("DataTables_Table_0_wrapper").querySelector("tbody").querySelectorAll("input[type='checkbox']");
     Array.prototype.map.call(checkboxes, function(element){
         element.setAttribute("checked", checkIt);
     });
  }

这应该这样做：

首先，将点击事件添加到标题中的复选框中。单击时，它会检查该框是否已选中或未使用 this.checked .然后，它会选中列表视图表正文中的复选框。表本身包装在带有 id 的div 中。使用 querySelectorAll（复选框）选择tbody中的所有元素。然后使用 Array.prototype.map 迭代它们，逐个选中或取消选中它们。

相关文章：