如何在ASP.NET网格视图中选中是否选中所有复选框

时间:2010-12-03 19:44:17

标签: asp.net gridview

如何检查ASP.NET网格视图中的所有复选框是否都已选中?

根据这一点,我必须将按钮变灰。我必须根据要检查的所有复选框启用该按钮。

我该怎么做以及我需要在哪个事件上放置代码?

3 个答案:

答案 0 :(得分:2)

根据您对Nick的回答的评论,我发现您更喜欢在服务器端执行此操作。我在这里提出的一个警告是,为了实现这一点,你需要将CheckBox的AutoPostBack属性设置为True,这意味着每次用户选中或取消选中一个复选框时,都会有回发。这可能会导致用户体验不佳。

服务器端解决方案

有了这个,这就是你如何在服务器端做到这一点。首先,我假设你的GridView中有一个包含CheckBox的TemplateField?您需要将其AutoPostBack属性设置为True,并为其创建一个CheckChanged事件处理程序。 (您可以通过转到Designer并从GridView的智能标记中选择编辑模板来创建事件处理程序。然后,选择模板并双击CheckBox。)

以下是此示例的GridView标记。请注意CheckBox的配置 - 此处,AutoPostBack设置为True,服务器端OnCheckChanged事件连接到服务器端事件处理程序chkSelected_CheckChanged

<asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="ProductID" DataSourceID="dsProducts">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox runat="server" ID="chkSelected" AutoPostBack="true" 
                    oncheckedchanged="chkSelected_CheckedChanged" />
            </ItemTemplate>
        </asp:TemplateField> 
        <asp:BoundField DataField="ProductName" HeaderText="Product" 
            SortExpression="ProductName" />
        ...
    </Columns>
</asp:GridView>

我的代码隐藏类的chkSelected_CheckedChanged事件处理程序循环遍历GridView的行。对于每一行,我引用CheckBox(chkSelected)并查看它是否已被选中。如果不是,那么我可以禁用我的按钮(btnDoSomething)。如果我循环遍历所有GridView行并且它们都没有检查,那么我知道我要启用我的按钮。

protected void chkSelected_CheckedChanged(object sender, EventArgs e)
{
    // Iterate through all of the rows in the grid and see if there is any unchecked CheckBox
    foreach (GridViewRow row in gvProducts.Rows)
    {
        var cb = row.FindControl("chkSelected") as CheckBox;
        if (!cb.Checked)
        {
            btnDoSomething.Enabled = false;
            return;
        }
    }

    // If we reach here, all checkboxes are checked, so enable btnDoSomething
    btnDoSomething.Enabled = true;
}

客户端解决方案

服务器端解决方案非常简单,但缺点是每次选中/取消选中CheckBox时都需要回发。我强烈建议使用客户端方法。实际上使用像jQuery这样的JavaScript库非常容易。

这里,GridView标记与之前相同,除了CheckBox 导致回发(即AutoPostBack为False)并且没有服务器端事件处理程序:< / p>

<asp:GridView ID="gvProducts" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="ProductID" DataSourceID="dsProducts">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox runat="server" ID="chkSelected" />
            </ItemTemplate>
        </asp:TemplateField> 
        ...
    </Columns>
</asp:GridView>

所有的魔力都发生在客户端。假设您已经引用了jQuery库,那么您的JavaScript代码就是以下内容:

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%=gvProducts.ClientID%> input[id*='chkSelected']:checkbox").click(EnableDisableButtonAsNeeded);

        EnableDisableButtonAsNeeded();
    });

    function EnableDisableButtonAsNeeded() {
        var totalCheckboxes = $("#<%=gvProducts.ClientID%> input[id*='chkSelected']:checkbox").size();
        var checkedCheckboxes = $("#<%=gvProducts.ClientID%> input[id*='chkSelected']:checkbox:checked").size();

        if (totalCheckboxes == checkedCheckboxes)
            $("#<%=btnDoSomething.ClientID %>").removeAttr('disabled');
        else
            $("#<%=btnDoSomething.ClientID %>").attr('disabled', 'disabled');
    }
</script>

我创建了一个名为EnableDisableButtonAsNeeded的客户端函数,它确定网格中有多少总复选框以及检查了多少复选框。如果这两个数字相等则启用按钮,否则禁用它。当页面加载时以及每次选中或取消选中复选框时,都会调用此函数。

快乐编程!

答案 1 :(得分:1)

使用JavaScript。我建议您阅读www.w3schools.com,特别是 Checkbox checked Property

您要做的主要是获取所有复选框的“id”并循环显示它们。

答案 2 :(得分:0)

很难确切地告诉你在何处放置代码而不了解更多关于你的页面以及如何检查复选框,但是进行此检查的一般模式将是这样的:

protected void checkCheckBoxes()
{
    bool allCheckBoxesChecked = true;

    // Go through each row in the gridview
    foreach (GridViewRow row in Gridview1.Rows)
    {
        // Go through every control in the row
        foreach (Control control in row.Controls)
        {
            // Control is the superclass so we can't tell what type it is 
            // Best we can do is examine the control ID...
            if (control.ID.Contains("CheckBox"))
            {
                // Cast the control to a CheckBox so we can examine the Checked property
                if (((CheckBox)control).Checked == false)
                {
                    // If the CheckBox isn't checked, we set our flag
                    allCheckBoxesChecked = false;

                    // Would be nice here to be able to break out of both loops but there's no doublebreak statement in C# :-(
                }
            }
        }
    }

    // Enable the button based on the value of the flag
    Button1.Enabled = allCheckBoxesChecked;

}

这是对Scott Mitchell的答案的类似答案,但可以使用行中的多个复选框。