从按钮客户端选择gridview中的所有复选框

Question

我有一个网格视图，其中的行包含一个复选框。在gridview下面我有一个按钮。当我单击它时，我想从客户端选择所有复选框。到目前为止，我已经阅读了有关 OnClientClick、javascript 等的内容。但我的代码不起作用。有人可以帮帮我吗？

注意：我不想选择在标题中选择复选框的复选框（我发现了很多关于此的示例），而是单击 gridview 之外的按钮

 <asp:GridView runat="server"  ID="MyGridView" EnableViewState="true" 
    AutoGenerateColumns="False" 
    ><AlternatingRowStyle BackColor="White" />

    <Columns>

    <asp:TemplateField HeaderText="Select" SortExpression="Select" ItemStyle-HorizontalAlign="Center" >
                <EditItemTemplate>
                    <asp:CheckBox ID="CkBoxSelectET" runat="server" /></EditItemTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="CkBoxSelectIT" runat="server" /></ItemTemplate>
       </asp:TemplateField>

       <asp:TemplateField HeaderText="Name" SortExpression="Name" ItemStyle-HorizontalAlign="Center" Visible="false" >
                <ItemTemplate>
                    <asp:Label ID="name" runat="server" Text='<%# Bind("Name") %>' Visible="false" /></ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="City" SortExpression="City" ItemStyle-HorizontalAlign="Left" >
                <ItemTemplate>
                    <asp:Label ID="lblCity" runat="server" /></ItemTemplate>
        </asp:TemplateField>

    </Columns>
    </asp:GridView>

<asp:Button runat="server" ID="btnSelect" Text="Select all" BackColor="LightGray" OnClientClick="SelectAll(id);" />

<script type="text/javascript">

var gridViewControl = document.getElementById('<%= MyGridView.ClientID %>');

function SelectAll(id) {
    for (i = 0; i < gridViewControl.elements.length; i++) {
        if (gridViewControl.elements[i].type == "checkbox") {
            gridViewControl.elements[i].checked = document.getElementById(id).checked;
        }
    }
} 

在c#中，当我绑定数据时：

 btnSelect.Attributes.Add("OnClientClick", "javascript:SelectAll('" + btnSelect.ClientID + "')");

Answer 1

您似乎在说“如果我的按钮被'选中'（即与您传入的 ID 相对应的元素），请选中此复选框”。由于无法检查按钮，因此这是行不通的。

您还说“单击此按钮时，调用此 Javascript 并传入变量 id 的值。”但id 并未在该上下文中定义。

如果您只想选择所有复选框，并且不想在所有/未选中之间切换，则此代码应该可以工作：

HTML：

<button id="btnSelect" type="button" onclick="SelectAll" >Select All</button>

在javascript中：

var gridViewControl = document.getElementById('<%= MyGridView.ClientID %>');

function SelectAll() {
    for (i = 0; i < gridViewControl.elements.length; i++) {
        if (gridViewControl.elements[i].type == "checkbox") {
            gridViewControl.elements[i].checked = true;
        }
   }

}

您根本不需要 c# 代码。

Answer 2

我建议使用 jQuery 完全在客户端执行此操作。我假设新的 ASP.NET 会按照您命名元素的方式呈现元素的 ID，所以我将使用它们。 （我认为 ASP.NET 中有一个设置以这种方式呈现 ID）

这里有一些示例代码，您可以将它们放在 HTML 代码的底部，包括 jQuery：

<script>
    $("#btnSelect").click(function(event) {
        event.preventDefault();
        $("#MyGridView").find("[type='checkbox']").prop('checked', true);
    });
</script>

这将只选择并检查 GridView 中的复选框，假设 GridView 容器元素的呈现 ID 是“MyGridView”。

Answer 3

我终于找到了解决方案，并且它有效。我稍微修改了@Ann L 的解决方案。

function SelectAll() {

    var frm = document.forms['aspnetForm'];

    for (var i = 0; i < document.forms[0].length; i++) {
        if (document.forms[0].elements[i].id.indexOf('CkBoxSelectIT') != -1) {

                document.forms[0].elements[i].checked = true

        }
    }
}

Answer 4

我已经这样做了，使用 getElementsByTagName("input") 在网格内查找输入元素。然后迭代并将值设置为选中。

HTML

<asp:CheckBox ID="chkSelectAll" runat="server" onclick="selectAll(this)" />

Javascript

function selectAll(chkAll) {
            var gvrecipe = document.getElementById('<%=gvrecipe.ClientID %>');
            var inputs = gvrecipe.getElementsByTagName("input");
            alert(inputs.length);
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].id.indexOf("_chkSelect") != -1)
                    inputs[i].checked = chkAll.checked;
            }
        }