在 GridView 中选择/取消选择所有复选框

• 下载演示应用程序 - 3.23 KB

引言

我将在此介绍一种功能，它使用 JavaScript 根据列标题复选框的选中或未选中状态，选择/取消选择 GridView 控件内特定列的所有复选框。 此功能还具有一个特性：当 GridView 内特定列的所有复选框都选中时，列标题复选框将自动选中，反之亦然。

使用代码

我在 GridView 内部使用了一个 TemplateField，并在 ItemTemplate 以及 TemplateField 的 HeaderTemplate 中放置了一个 CheckBox。

HTML 代码如下所示

<asp:GridView ID="gvCheckboxes" runat="server" 
              AutoGenerateColumns="False" OnRowCreated="gvCheckboxes_RowCreated">
   <Columns>
      <asp:BoundField HeaderText="S.N." DataField="sno">
         <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
         <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
      </asp:BoundField>
      <asp:TemplateField HeaderText="Select">
         <ItemTemplate>
            <asp:CheckBox ID="chkBxSelect" runat="server" />
         </ItemTemplate>
         <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
         <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
         <HeaderTemplate>
            <asp:CheckBox ID="chkBxHeader" 
                 onclick="javascript:HeaderClick(this);" runat="server" />
         </HeaderTemplate>
      </asp:TemplateField>
      <asp:TemplateField>
         <ItemTemplate>
            <asp:CheckBox ID="chkBx" runat="server" />
         </ItemTemplate>
         <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
      </asp:TemplateField>
   </Columns>
   <RowStyle BackColor="Moccasin" />
   <AlternatingRowStyle BackColor="NavajoWhite" />
   <HeaderStyle BackColor="DarkOrange" Font-Bold="true" ForeColor="white" />
</asp:GridView>

将客户端 onclick 事件附加到标题复选框 [chkBxHeader]。

<asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" /> 

将以下代码放入 GridView 的 RowCreated 事件中

if (e.Row.RowType == DataControlRowType.DataRow && 
   (e.Row.RowState == DataControlRowState.Normal ||
    e.Row.RowState == DataControlRowState.Alternate))
{
   CheckBox chkBxSelect = (CheckBox)e.Row.Cells[1].FindControl("chkBxSelect");
   CheckBox chkBxHeader = (CheckBox)this.gvCheckboxes.HeaderRow.FindControl("chkBxHeader");
   chkBxSelect.Attributes["onclick"] = string.Format
                                          (
                                             "javascript:ChildClick(this,'{0}');",
                                             chkBxHeader.ClientID
                                          );
}

在上面的代码中，客户端 onclick 事件已附加到子复选框 [chkBxChild]。

将此 JavaScript 添加到页面的 head 部分

<script type="text/javascript">
var TotalChkBx;
var Counter;

window.onload = function()
{
   //Get total no. of CheckBoxes in side the GridView.
   TotalChkBx = parseInt('<%= this.gvCheckboxes.Rows.Count %>');

   //Get total no. of checked CheckBoxes in side the GridView.
   Counter = 0;
}

function HeaderClick(CheckBox)
{
   //Get target base & child control.
   var TargetBaseControl = 
       document.getElementById('<%= this.gvCheckboxes.ClientID %>');
   var TargetChildControl = "chkBxSelect";

   //Get all the control of the type INPUT in the base control.
   var Inputs = TargetBaseControl.getElementsByTagName("input");

   //Checked/Unchecked all the checkBoxes in side the GridView.
   for(var n = 0; n < Inputs.length; ++n)
      if(Inputs[n].type == 'checkbox' && 
                Inputs[n].id.indexOf(TargetChildControl,0) >= 0)
         Inputs[n].checked = CheckBox.checked;

   //Reset Counter
   Counter = CheckBox.checked ? TotalChkBx : 0;
}

function ChildClick(CheckBox, HCheckBox)
{
   //get target control.
   var HeaderCheckBox = document.getElementById(HCheckBox);

   //Modifiy Counter; 
   if(CheckBox.checked && Counter < TotalChkBx)
      Counter++;
   else if(Counter > 0) 
      Counter--;

   //Change state of the header CheckBox.
   if(Counter < TotalChkBx)
      HeaderCheckBox.checked = false;
   else if(Counter == TotalChkBx)
      HeaderCheckBox.checked = true;
}
</script>

在上面的脚本中，有两个全局变量：TotalChkBx 和 Counter。 这些变量在 window.onload 事件中初始化。 有两种方法：HeaderClick 和 ChildClick。 HeaderClick 方法根据标题复选框的选中或未选中状态，检查/取消检查 GridView 内部特定列的所有复选框。 ChildClick 方法根据 GridView 内部特定列的所有复选框是否都已选中或未选中，检查/取消检查标题复选框。

只需下载示例应用程序并享受编码的乐趣！ 希望您喜欢这篇文章。

支持的浏览器

我已在以下浏览器上测试了此脚本