单选按钮radio和span问题

Question

一组单选按钮radio 有2个单选按钮  还有2个span  当选中第1个单选按钮 span1显示 span2不显示  当选中第2个单选按钮 span1不显示 span2显示  
这个要怎么实现

Answer 1

以下仅供参考<input type="radio" name="r1" onclick="document.all.sp1.style.display='';document.all.sp2.style.display='none';" />
<input type="radio" name="r1" onclick="document.all.sp2.style.display='';document.all.sp1.style.display='none';" />
<span id="sp1" style="display:none">呵呵呵</span>
<span id="sp2" style="display:none">哈哈哈</span>

Answer 2

搞个扩展性比较强的~~~
<script>
/* 功能预定义 */
function builder(){
    this.group=[];
    this.bangding=function(radio,span){
        radio.span=span;
        radio.builder=this;
        this.group.push(radio);
        radio.onclick=function(){
            this.builder.reset(this);
        }
    }
    this.reset=function(sender){
        for(var i=0,j=this.group.length;i<j;i++){
            this.group[i].span.style.display='none';
        }
        sender.span.style.display='';
    }
}
/* 功能使用 */
window.onload=function(){
    var box=new builder();
    box.bangding(document.getElementById("ra1"),document.getElementById("sp1"));
    box.bangding(document.getElementById("ra2"),document.getElementById("sp2"));    var box2=new builder();
    box2.bangding(document.getElementById("_ra1"),document.getElementById("_sp1"));
    box2.bangding(document.getElementById("_ra2"),document.getElementById("_sp2"));
}
</script>为了测试功能，搞了2组radio
<hr /><input type="radio" name="r1" id="ra1" />
<input type="radio" name="r1" id="ra2" />
<span id="sp1" style="display:none">呵呵呵</span>
<span id="sp2" style="display:none">哈哈哈</span><hr /><input type="radio" name="r2" id="_ra1" />
<input type="radio" name="r2" id="_ra2" />
<span id="_sp1" style="display:none">呵呵呵</span>
<span id="_sp2" style="display:none">哈哈哈</span>