使用 JavaScript 在 GridView 中勾选/取消勾选复选框

ASP.NET 社区

5.00/5 (2投票s)

2013 年 10 月 11 日

CPOL

3分钟阅读

47407

关于如何使用 JavaScript 在 GridView 控件中勾选/取消勾选 CheckBoxes 的问题被问了很多次。这里是一个你可以遵循的快速参考。

首先是 .aspx 标记。

<script type="text/javascript">
    function SelectAll(id) {
        var frm = document.forms[0];
        for (i=0;i<frm.elements.length;i++) {
            if (frm.elements[i].type == "checkbox") {
                frm.elements[i].checked = document.getElementById(id).checked;
            }
        }
    }  
</script>
<!-- 假设 SqlDataSource1 是我的 GridView 的数据源 -->
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Width="400px">
    <Columns>
        <asp:TemplateField>
            <AlternatingItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </AlternatingItemTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
            <HeaderTemplate>
                <asp:CheckBox ID="cbSelectAll" runat="server" Text="全选" />
            </HeaderTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

接下来是 VB 和 C# 的代码隐藏部分

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
    If (e.Row.RowType = DataControlRowType.Header) Then
        '在页眉的复选框上添加一个 onclick 事件属性
        '并传递 Select All 复选框的 ClientID
        DirectCast(e.Row.FindControl("cbSelectAll"), CheckBox).Attributes.Add("onclick", "javascript:SelectAll('" & _
            DirectCast(e.Row.FindControl("cbSelectAll"), CheckBox).ClientID & "')")
    End If
End Sub

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e) {
    if (e.Row.RowType == DataControlRowType.Header) {
        //在页眉的复选框上添加一个 onclick 事件属性
        //并传递 Select All 复选框的 ClientID
        ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");
    }
}

上面的例子很棒，但有几点可以改进。

应该避免使用 JavaScript 伪协议 (Javascript:your method here)，这是旧 Netscape 时期的遗留产物。现在有更好的替代方案。
在这种情况下，我们可能根本不需要服务器端部分。

关于 JavaScript 伪协议的摘录

"javascript: 伪协议不应在 onclick 等事件处理程序中使用。它应该只用于包含 URL 的属性中，例如 <a> 元素的 href 属性和 <form> 元素的 action 属性。你也可以用它来制作书签。" - 常见的 JavaScript 错误

另一种解决方案 .aspx 标记：

<script type="text/javascript">
    // 让我们使用小写函数名以符合 JavaScript 约定
    function selectAll(invoker) {
        // 由于 ASP.NET 的复选框实际上是 HTML input 元素
        //  让我们获取所有 input 元素 
        var inputElements = document.getElementsByTagName('input');
 
        for (var i = 0 ; i < inputElements.length ; i++) {
            var myElement = inputElements[i];
 
            // 过滤 input 类型，查找复选框
            if (myElement.type === "checkbox") {
 
               // 使用调用者（我们正在调用的元素）作为参考 
               //  来设置复选框的状态
                 myElement.checked = invoker.checked;
            }
        }
    }  
</script>
 
<!-- 假设 SqlDataSource1 是我的 GridView 的数据源 -->
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1">
    <Columns>
        <asp:TemplateField>
            <AlternatingItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </AlternatingItemTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" />
            </ItemTemplate>
            <HeaderTemplate>
                <asp:CheckBox ID="cbSelectAll" runat="server" Text="全选" OnClick="selectAll(this)" />
            </HeaderTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>