【翻译】验证GridView中至少有一个CheckBox选中的客户端脚本

 

翻译
原文Samir Nigam著Client Side Validation for CheckBoxes inside the GridView

简介
本文及附件中的代码介绍的是一个JavaScript，用以保证GridView的一列中至少有一个Checkbox被选中。

 

代码使用
我在GridView中使用了一个TemplateField，然后再气质放入一个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事件。

然后，在页面中加入这个JavaScript 脚本

 

<script type="text/javascript">

function TestCheckBox()

{

//get target base & child control.

var TargetBaseControl = document.getElementById('<%= this.GridView1.ClientId %>');

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) 

if(Inputs[n].checked) return true; 



alert('Select at least one checkbox!');

return false;

}

</script>

 

 
上面的脚本中，TestCheckBox函数首先得到父控件[GridView] 的引用，获得该空间里所有‘input’ 元素的数组。然后，迭代所以元素，测试是否有CheckBox被选中。

该脚本可以支持各种浏览器。