全选或者全不选-优快云博客

本文介绍如何在ASP.NET的GridView控件中实现全选功能，包括服务器端和客户端两种实现方式，并提供了一个表单全选功能的例子。服务器端通过遍历GridView的每一行来设置复选框的状态，而客户端则利用JavaScript操作DOM元素实现全选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
                    Width="90%">
                    <Columns>
                      <asp:TemplateField>
                          <HeaderTemplate><asp:CheckBox ID="SelectAll"
                                  runat="server" onclick="SelectAll(this.id)"/></HeaderTemplate>
                          <ItemTemplate><asp:CheckBox ID="chkSelect" runat="server" /></ItemTemplate>
                          <HeaderStyle HorizontalAlign="Center" />
                      </asp:TemplateField>
                        <asp:BoundField DataField="ADID" HeaderText="广告编号" />
                        <asp:BoundField DataField="NAME" HeaderText="网站名称" />
                        <asp:BoundField DataField="PLACEID" HeaderText="广告位编号" />
                        <asp:BoundField DataField="MONITPOINT" HeaderText="监测点" />

                        <asp:TemplateField HeaderText="数据">
                            <ItemTemplate>
                                <asp:TextBox ID="TextBox1" runat="server" Text="1000"></asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateField>

                    </Columns>
                </asp:GridView>
1、服务器端的

protected void SelectAll_CheckedChanged(object sender,EventArgs e)

{

CheckBox chk=(CheckBox)GridView1.HeaderRow.FindControl("SelectAll");

foreach (GridViewRow row in GridView1.Rows)

{

if (chk != null)

{

if(chk.Checked==true){

CheckBox chk1=row.FindControl("chkSelect") asCheckBox;

chk1.Checked=true;

}

else{

CheckBox chk1=row.FindControl("chkSelect") asCheckBox;

chk1.Checked=false;

}

2、客户端的
<script type="text/javascript" language="javascript">

           function SelectAll(id)
           {
                alert(id);
               if(document.getElementById(id).checked)
               {
                   SelectAllTrue(id);
               }
               else
               {
                   SelectAllFalse(id);
               }
           }

           function SelectAllTrue(id)
           {
               var controls = document.getElementsByTagName("input");
               //var strKeys = document.getElementById('SelectKeys').value;
               var tmpKey;
               var strKey;
               for(var i=0;i<controls.length;i++)
               {
                   if (controls[i].type=="checkbox" && controls[i].id!=id)
                   {
                       controls[i].checked=true;
                   }
               }

           //   document.getElementById('SelectKeys').value = strKeys;
           }

           function SelectAllFalse(id)
           {
               var controls = document.getElementsByTagName("input");
               var tmpKey;
               var strKey;

               for(var i=0;i<controls.length;i++)
               {
                   if (controls[i].type=="checkbox" && controls[i].id!=id)
                   {
                       controls[i].checked=false;
                   }
               }

           }

        </script>
3,表单方式
<script type="text/javascript">
    function CheckAll(obj) {
        for (var i = 0; i < document.mainForm.ChkID.length; i++) {
            var temp = document.mainForm.ChkID[i];
            temp.checked = obj.checked;
        }
    }
    </script>

<body>
    <form id="mainForm" runat="server">
      <div class="MainDiv">
                    <td class="titlecontent"><input type="checkbox" name="ChkID" value="<%#Eval("CustomerId")%>"></td>
          </div>
         <input name="ChkAllID" type="checkbox" onclick="CheckAll(this);" style="margin-left:30px" />全选         
</form>
</body>