GridView 中 CheckBox 的客户端验证

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

引言

我在这里提供一段 JavaScript 代码，它确保在提交表单之前，GridView 控件中特定列的复选框中至少选中一个。

使用代码

我在 GridView 控件中使用了一个 TemplateField，并在 TemplateField 的 ItemTemplate 中放置了一个 CheckBox。

HTML 代码如下所示

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
   <Columns> 
      <asp:BoundField HeaderText="n" DataField="sno"> 
       <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
          <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
      </asp:BoundField>                
       <asp:TemplateField HeaderText="Select">
            <ItemTemplate>
               <asp:CheckBox ID="chkBxSelect" runat="server" />
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
        </asp:TemplateField>
     </Columns>
  </asp:GridView>
 <asp:Button ID="btnPost" runat="server" Text="Post" 
             OnClientClick="javascript:return TestCheckBox();"
             OnClick="btnPost_Click" />

将 OnClientClick 事件附加到按钮 [btnPost]

<asp:Button ID="btnPost" runat="server" Text="Post" 
            OnClientClick="javascript:return TestCheckBox();"
            OnClick="btnPost_Click" />

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

<script type="text/javascript">
   var TargetBaseControl = null;
        
   window.onload = function()
   {
      try
      {
         //get target base control.
         TargetBaseControl = 
           document.getElementById('<%= this.GridView1.ClientID %>');
      }
      catch(err)
      {
         TargetBaseControl = null;
      }
   }
        
   function TestCheckBox()
   {              
      if(TargetBaseControl == null) return false;
      
      //get target child control.
      var TargetChildControl = "chkBxSelect";
            
      //get all the control of the type INPUT in the base control.
      var Inputs = TargetBaseControl.getElementsByTagName("input"); 
            
      for(var n = 0; n < Inputs.length; ++n)
         if(Inputs[n].type == 'checkbox' && 
            Inputs[n].id.indexOf(TargetChildControl,0) >= 0 && 
            Inputs[n].checked)
          return true;        
            
      alert('Select at least one checkbox!');
      return false;
   }
</script>

在上面的脚本中，全局变量 TargetBaseControl 在 window.onload 事件中初始化，以便获取父控件 [GridView] 的引用。函数 TestCheckBox 首先获取父控件内所有 ‘input’ 元素的数组。然后，它遍历数组的所有元素并测试一个条件，如果条件为真，则返回 true，表示 GridView 内部至少选中了一个复选框；否则，它显示一条消息并返回 false。该条件测试父元素 [GridView] 内特定列中特定类型的元素。

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

此脚本的功能

此脚本与跨浏览器兼容且速度快，因为它在目标元素 [GridView] 内迭代特定标签的元素，而不是在整个表单中迭代。它在目标元素 [GridView] 的特定列中搜索特定类型的元素。

支持的浏览器

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