使用javascript实现DataView等容器中RadioButton的单选功能

经常会遇到绑定的DataView需要单选一项的功能，但是RadioButton一旦放在此类容器中后，GroupName就不再起作用了，因为控件在客户端的name前面就加上了所属容器的id，并用"$"分割开每层容器id，变成诸如gvMappings$ctl02$Deptname这样的格式，而客户端实现单选是通过相同的name属性来判断的。

不过可以通过给RadioButton增加一个单击事件处理程序来解决，这段javascript的作用就是找到与被单击单选按钮同一分组的RadioButton并将其余按钮都设置为未选中状态。

 

<asp:GridView ID="gvMappings" runat="server" AutoGenerateColumns="False" OnRowDataBound="gvMappings_RowDataBound"> <Columns> <asp:TemplateField HeaderText="部门名"> <ItemTemplate> <asp:RadioButton ID="rdoDeptName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "DEPTNAME") %>' GroupName="Deptname" οnclick="javascript:RadioCheck(this)" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>

function RadioCheck(obj) { function GetGroupName(v_name) { return v_name.substr(v_name.lastIndexOf('$') + 1); } var controls = obj.form.getElementsByTagName("input"); var groupName = GetGroupName(obj.name); for(i=0;i<controls.length;i++) { if (controls[i].type == "radio" && controls[i].id != obj.id && GetGroupName(controls[i].name) == groupName) { controls[i].checked = false; } } }

 

其中GetGroupName的作用是取到服务器端实际设置的GroupName；

RadioCheck函数先找到当前单选按钮所在的form中的其它input控件，然后将这些控件中是单选按钮的且不是当前被选择的且具有相同GroupName的控件置为未选中状态。

本文中的例子在ASP.NET 2.0环境下测试通过，1.1中应该修改一下GetGroupName函数。