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

Question

我有一个列表视图，其中 header 有一个复选框。我想 select 行中的所有复选框，如果 header 复选框是 checked/unchecked。我怎样才能在客户端实现这一点？这是ListView的设计代码。

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

Answer 1

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 检查该框是否已勾选。然后它 select 您在列表视图 table 正文中的复选框。 table 本身包裹在一个带有 id 的 div 中。 Select tbody 中的所有元素使用查询SelectorAll，即一个复选框。然后使用 Array.prototype.map 遍历它们，逐一选中或取消选中它们。

Answer 2

首先，将您的 header 复选框更改为这个。我们不需要它来回发。

<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);
                    }
                });
            }
        }

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

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

javascript

c#

asp.net

listview