有个同学在酒店管理系统（二）中遇到一个问题，就是在一个页面中，DataList控件的ItemTemplate列都有RadioButton，那么问题就出现了，一般的话，RadioButton作用就是实现单选；但是如果只是单单把RadioButton放到DataList的ItemTemplate列中，是实现不了单选。那么该怎么样才能实现radiobutton按钮单选呢？也许很多同学这个时候就会想到使用.NET中自带的RadioButtonList这个控件,当然的可以用来解决这个单选的问题。但是不用这个控件，想用脚本来解决的话，那又该怎么办呢？
下面这段代码也许可以帮我们解决上面的烦恼：
<script language="javascript" type="text/javascript">
function RadioButtonSelect(){
var dom = document.all; //取得所有的文档元素
var eventSrc = event.srcElement; //事件源（即被click的元素）
if(eventSrc .tagName == "input" && eventSrc .type.toLowerCase() == "radio") {
for(var i=0;i<dom.length;i++) {
if(dom[i].tagName == "input" && dom[i].type.toLowerCase() == "radio") {
dom[i].checked = false;//把所有Radio都设为未选状态
}
}
}
eventSrc .checked = true;//刚点击过的则设为选中状态
}
</script>
<body onclick = "RadioButtonSelect()">
可是这段代码的威力还不够大，对于一个DataList来说就够用了，可有时一个页面的话不单单就这么一个DataList，或者也可以有其他的RadioButton，那么这段代码就失效，使得整个页面的RadioButton都只能选一个了！那么我们又该如何去解决遇到的新问题呢？以下便是针对此问题的一个解决方案：
<script language="javascript" type="text/javascript">
function RadioButtonSelect(obj,dlName) {
var elem = obj.form.elements;
var dListName= dlName;
for(var i = 0; i < elem.length; i++) {
if(elem[i].type == "radio" && elem[i].id != obj.id && obj.name.subString (0 , elem[i].name.indexOf('$') )== dListName) {
elem[i].checked = false; //把不是触发click事件的radio状态设置为未选
}
}
}
</script>
<asp:DataList ID="dlTest" runat="server">
<ItemTemplate>
<asp:RadioButton ID="rbtnText" runat="server" Text='<%# Eval("Test") %>' οnclick="javascript:RadioButtonSelect(this,'dlTest')" />
</ItemTemplate>
<asp:DataList>
总结一下这两个实现方法的思路吧。第一个是先找到所有的Radio并把他们的状态设值为false，然后再把触发事件（即被单击）的那个raRadiodio设值为true；而第二个方法是传入2个参数，一个是触发事件的对象obj（其实这个obj对象就是一个Radio），一个是该Radio对象所属的DataList的Name，然后遍历这个Radio属表单下的所有Radio按钮，根据Name找到所有跟他同属于一个DataList的其它Radio，并把这些Radio的状态设为false（即未选）。
1730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
