datalist里的单选按钮实现单选（IE,FF适用）

昨天我们的一个项目中遇到图片列表中单张图片选择，适用Datalist内插RadioButton实现。

开始发现RadioButton中Datalist中GroupName属性不起作用，网上搜寻一番发现只能用JS实现。

JS代码：Asp.Net中datalist等web控件里面，放多个单选按钮的时候可以同时多选。 问题解决： 最理想的解决之道，用javascript： <mce:script language="javascript" type="text/javascript"><!-- function clickit() { var dom=document.all; var el=event.srcElement; if(el.tagName=="INPUT"&&el.type.toLowerCase()=="radio") { for(i=0;i<dom.length;i++) { if(dom[i].tagName=="INPUT"&&dom[i].type.toLowerCase()=="radio") { dom[i].checked=false; } } } el.checked=true; } // --></mce:script> 单选按钮的代码如： <asp:RadioButton ID="RadioButton1" runat="server" οnclick="clickit();" Text='<%# DataBinder.Eval(Container.DataItem, "CARD_NBR")%>' />

 

加入项目测试发现，只适用于IE，FF下并不能实现（没有实现兼容）。经过修改后，问题解决，copy出来供大家分享：

 //js源码： function isIE() { if(document.all) return true; return false; } function clickit(evnt) { var dom=document.getElementsByTagName("INPUT"); var el= (isIE())?event.srcElement:evnt.target; if(el.tagName=="INPUT"&&el.type.toLowerCase()=="radio") { for(i=0;i<dom.length;i++) { if(dom[i].tagName=="INPUT"&&dom[i].type.toLowerCase()=="radio") { dom[i].checked=false; } } } el.checked=true; } //HTML代码： <asp:DataList DataKeyField="TemplateID" ID="dlTemplate" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" Width="100%"> <ItemTemplate> <table> <tr> <td> <img alt="<%#Eval("TemplateName")%>" width="120px" height="120px" src="../CompanyHome/style/CssPic/<%#Eval("TemplateSmallPic")%>" /></td> </tr> <tr> <td> <a href="javascript:OnClickPic('<%#Eval(" mce_href="javascript:OnClickPic('&lt;%#Eval("TemplatePic")%>')">查看效果图</a>   <a href="javascript:OnClickPic('<%#Eval(" mce_href="javascript:OnClickPic('&lt;%#Eval("TemplateFramework")%>')"> 查看框架图</a></td> </tr> <tr> <td> 选择：<asp:RadioButton ID="rbCheck" runat="server" οnclick="clickit(event)" ToolTip='<%#Eval("TemplateID")%>' /></td> </tr> </table> </ItemTemplate> </asp:DataList>