GridView中实现CheckBox的全选

最新推荐文章于 2025-07-22 13:14:47 发布

转载最新推荐文章于 2025-07-22 13:14:47 发布 · 515 阅读

文章标签：

#asp #input #server #脚本

c# asp.net 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何在ASP.NET的GridView控件中实现带有全选功能的多选框。通过示例展示了如何使用客户端JavaScript来同步全选框与各条目中的多选框状态，实现高效的数据行选择。

用脚本实现：

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
        DataKeyNames="AreaID" DataSourceID="SqlDataSource1">
        <Columns>
            <asp:BoundField DataField="AreaID" HeaderText="AreaID" ReadOnly="True"

                      SortExpression="AreaID" />
            <asp:BoundField DataField="CityID" HeaderText="CityID" SortExpression="CityID" />
            <asp:TemplateField>
                <HeaderTemplate>
                    <input id="chkAll"  onclick="SelectAll(this)"; type=checkbox>
                </HeaderTemplate>
                <ItemTemplate>
                    <input id="chkItem" type=checkbox>                
                 </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

再客户端写javascript

function SelectAll(chkbox)
{
   var box=chkbox;
   state=theBox.checked;    
   elem=box.form.elements;
   for(i=0;i<elem.length;i++)
   if(elem[i].type=="checkbox" && elem[i].id!=box.id)
    {
         if(elem[i].checked!=state)
         {
            elem[i].click();
         }
    }
 }