选中GridView中的所有复选框

本文关键字：复选框 GridView 选中 | 更新日期: 2023-09-27 18:29:17

我在ASP.NET/C#中有一个GridView，它有一个CheckBoxField、一个BoundField和两个ButtonFields。所有4个都有一个标题，以明确列所代表的位置。在Page_Load事件中，我将GridView的Вatásource设置为已填充的DataTable。

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

现在我想给这个复选框添加一个函数，当它被选中时，所有的复选框都会被选中，反之亦然。我试着用jQuery做这件事，但没有成功，因为我找不到一种方法给GridView中的所有复选框相同的ID或NAME。

当我选中标题中基于HTML的复选框时，是否发生了事件？如果是，哪个事件？如果没有，当我选中该复选框并从代码后面更改GridView时，我如何触发事件。

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

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

更新：

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

选中GridView中的所有复选框

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

根据您的尝试此代码

在网格视图中

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

这是我为您准备的一个示例。

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>
相关文章：