从 GridView 中的一个复选框选择所有行

今天我将向您展示如何从 GridView 标题中位于一个复选框中选择 GridView 中的所有记录。

首先按照以下代码片段设置 GridView

<asp:GridView ID="GridView1" runat="server" 
AutoGenerateColumns="False" 
            
onrowdatabound="GridView1_RowDataBound" 
            
            >
            <Columns>
                <asp:TemplateField>
                
                <HeaderTemplate>
                <asp:CheckBox ID="allchk"  
                    runat="server" Text="All" />
                </HeaderTemplate>
                <ItemTemplate>
                
                <asp:CheckBox ID="selectchk" 
                    runat="server" />
               
                </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="TR. ID">
                
                <ItemTemplate>
                <asp:Label ID="namelbl" 
                    runat="server" Text='<%#Eval(
                    "name") %>'></asp:Label>
                </ItemTemplate>
                 </asp:TemplateField>
                
            </Columns>
        </asp:GridView>

在下一步中，您需要编写一小段 JavaScript 代码。

<script type="text/javascript">
        function SelectAll(id)
        {
            //get reference of GridView control
            var grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the grid
            var cell;
            
            if (grid.rows.length > 0)
            {
                //loop starts from 1. rows[0] points to the header.
                for (i=1; i<grid.rows.length; i++)
                {
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];
                    
                    //loop according to the number of childNodes in the cell
                    for (j=0; j<cell.childNodes.length; j++)
                    {           
                        //if childNode type is CheckBox                 
                        if (cell.childNodes[j].type =="checkbox")
                        {
                        //assign the status of the Select All checkbox to the cell 
                        //checkbox within the grid
                            cell.childNodes[j].checked = document.getElementById(id).checked;
                        }
                    }
                }
            }
        }
    </script>

接下来，在 GridView 的 RowDataBound 事件中，将 JavaScript 函数添加到“全选”复选框的 onclick 事件中。

 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

        {
            
           //header select all function
            if (e.Row.RowType == DataControlRowType.Header)
            {
                ((CheckBox)e.Row.FindControl("allchk")).Attributes.Add("onclick", 
                    "javascript:SelectAll('" +
                    ((CheckBox)e.Row.FindControl("allchk")).ClientID + "')");
            }

            }

编程愉快！