检查 GridView 中的所有复选框答案

【问题标题】：Check all CheckBoxes in GridView检查 GridView 中的所有复选框
【发布时间】：2012-04-10 18:41:33
【问题描述】：

我在 ASP.NET/C# 中有一个 GridView，带有一个 CheckBoxField、一个 BoundField 和 2 个 ButtonField。它们都有一个标题，以明确该列代表的位置。在 Page_Load 事件中，我将 GridView 的 ВataЫource 设置为填充的 DataTable。

我想让它更易于用户使用，并希望在标题中添加一个复选框。当用户选中该复选框时，应在 GridView 中选中所有 CheckBox。我已将 CheckBoxField 的 HeaderText 设置为<input type='checkbox' />，现在它在标题中显示了一个复选框。

现在我想为该复选框添加一个功能，当它被选中时，所有复选框都将被选中，反之亦然。我尝试使用 jQuery 来实现，但没有成功，因为我找不到为 GridView 中的所有 CheckBox 提供相同 ID 或 NAME 的方法。

当我在标题中选中基于 HTML 的复选框时是否会发生事件？如果是，是哪个事件？如果不是，我如何在选中该复选框时触发事件，并从我的代码隐藏中更改 GridView。

如果这些都不可能，我怎么能以另一种方式做到这一点，使用 javascript、jQuery 或者可能使用 ASP.net 控件。

我希望你能帮助我，但请不要指望我是代码大师。我是一家需要具有此功能的系统的公司的实习生。

更新：

感谢大家帮助我。什么是让 DataSource 回到 DataTable 的最简单方法，因为我需要知道哪些行被选中，哪些没有被选中？

【问题讨论】：

标签： c# asp.net .net gridview checkbox

【解决方案1】：

根据你的情况试试这个代码

在网格视图中

<asp:TemplateField>
        <HeaderTemplate>                                
            <asp:CheckBox ID="headerchkbox" runat="server"  CssClass="chkheader" />
        </HeaderTemplate>
        <ItemTemplate>
            <asp:CheckBox ID="CheckBoxAssign" runat="server" CssClass="chkitems" />
        </ItemTemplate>
</asp:TemplateField>

java脚本

<script type="text/javascript">
        $(window).bind('load', function () {
            var headerChk = $(".chkheader input");
            var itemChk = $(".chkitems input");
            headerChk.bind("click", function () { itemChk.each(function () { this.checked = headerChk[0].checked; })
            });
            itemChk.bind("click", function () { if ($(this).checked == false) headerChk[0].checked = false; });
        });
    </script>

【讨论】：

【解决方案2】：

这是我为您准备的示例。

ASPX

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var allCheckBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkAll"]:checkbox';
        var checkBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkSelected"]:checkbox';

        function ToggleCheckUncheckAllOptionAsNeeded() {
            var totalCheckboxes = $(checkBoxSelector),
         checkedCheckboxes = totalCheckboxes.filter(":checked"),
         noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
         allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);

            $(allCheckBoxSelector).attr('checked', allCheckboxesAreChecked);
        }

        $(document).ready(function () {
            $(allCheckBoxSelector).live('click', function () {
                $(checkBoxSelector).attr('checked', $(this).is(':checked'));

                ToggleCheckUncheckAllOptionAsNeeded();
            });

            $(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded);

            ToggleCheckUncheckAllOptionAsNeeded();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <asp:CheckBox ID="chkAll" runat="server" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkSelected" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<string> lstObjects = new List<string> { "aaa", "bbb" };
                GridView1.DataSource = lstObjects;
                GridView1.DataBind();
            }
        }

如果您使用的是最新版本的 jQuery (1.7)

使用以下内容：

<script type="text/javascript">
        var allCheckBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkAll"]:checkbox';
        var checkBoxSelector = '#<%=GridView1.ClientID%> input[id*="chkSelected"]:checkbox';

        function ToggleCheckUncheckAllOptionAsNeeded() {
            var totalCheckboxes = $(checkBoxSelector),
         checkedCheckboxes = totalCheckboxes.filter(":checked"),
         noCheckboxesAreChecked = (checkedCheckboxes.length === 0),
         allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length);

            $(allCheckBoxSelector).attr('checked', allCheckboxesAreChecked);
        }

        $(document).ready(function () {
            $(allCheckBoxSelector).click(function () {
                $(checkBoxSelector).attr('checked', $(this).is(':checked'));

                ToggleCheckUncheckAllOptionAsNeeded();
            });

            $(checkBoxSelector).click(ToggleCheckUncheckAllOptionAsNeeded);

            ToggleCheckUncheckAllOptionAsNeeded();
        });
    </script>

【讨论】：

【解决方案3】：

使用 jQuery，您可以获得 GridView 中的所有复选框，然后您可以根据需要更改每个复选框的状态。您可以通过单击链接或按钮或任何您喜欢的方式调用此 javascript 函数。

function CheckAll()
{   
    var updateButtons = jQuery('#<%=gvGridViewId.ClientID%> input[type=checkbox]');

    updateButtons.each( function() {
            // use this line to change the status if check to uncheck and vice versa
            //  or make it as you like with similar function
        jQuery(this).attr("checked", !this.checked);
    });     
}

【讨论】：