Question

我在ASP.NET / C＃中有一个带有CheckBoxField，BoundField和2个ButtonFields的GridView。它们中的所有4个都有一个标题，以清楚地表示列的位置。在Page_Load事件中，我将GridView的ВataЫource设置为我填充的DataTable。

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

现在我想在该复选框中添加一个函数，当它被选中时，将检查所有CheckBox，反之亦然。我尝试用jQuery做，但它没有用，因为我找不到一种方法来给GridView中的所有CheckBox提供相同的ID或NAME。

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

如果这些都不可能，我怎么能用另一种方式，javascript，jQuery或ASP.net控件。

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

更新

谢谢大家的帮助。将DataSource重新放回DataTable的最简单方法是什么，因为我需要知道选择了哪些行而哪些行没有？

Answer 1

使用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);
    });     
}

Answer 2

根据您的意见尝试此代码

网格视图中的

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

Answer 3

以下是我为您准备的示例。

<强> 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>

<强> C＃

        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>

检查GridView中的所有CheckBoxes

3 个答案:

如果您使用的是最新版本的jQuery（1.7）