Question

我有一个包含复选框的行的gridview。在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）

这里有一些示例代码，在包含jQuery后可以放在HTML代码的底部：

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

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

4 个答案: