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

最新推荐文章于 2021-06-29 01:13:56 发布

原创最新推荐文章于 2021-06-29 01:13:56 发布 · 置顶 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #radiobutton #javascript #input #server #asp

.net 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了解决Asp.Net中Datalist控件内RadioButton群组选择问题的方法，通过JavaScript实现了不同浏览器间的兼容性，并提供了修改后的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

JS代码：Asp.Net中datalist等web控件里面，放多个单选按钮的时候可以同时多选。问题解决：最理想的解决之道，用javascript： <mce:script language="javascript" type="text/javascript"></mce:script> 单选按钮的代码如： <asp:RadioButton ID="RadioButton1" runat="server" onclick="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('<%#Eval("TemplatePic")%>')">查看效果图</a> <a href="javascript:OnClickPic('<%#Eval(" mce_href="javascript:OnClickPic('<%#Eval("TemplateFramework")%>')"> 查看框架图</a></td> </tr> <tr> <td> 选择：<asp:RadioButton ID="rbCheck" runat="server" onclick="clickit(event)" ToolTip='<%#Eval("TemplateID")%>' /></td> </tr> </table> </ItemTemplate> </asp:DataList>