Question

我有一个列表视图，其中标题中有一个复选框。如果选中/取消选中标题复选框，我想选择行中的所有复选框。我怎样才能在客户端实现这一目标？这是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

首先，将标题Checkbox更改为此标题。我们不需要它回发。

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

Answer 2

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迭代它们，逐个检查或取消选中它们。

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

2 个答案: