用JavaScript实现点击不同的单选按钮出现不同的内容

在网页中，通过选择不同的单选按钮，来控制页面上显示不同的内容。要实现这个功能，方法有很多种，个人觉得下面的方法比较好用（试验证明），虽然繁琐些，但思路清楚，简单易懂。

~~~~~~~~~~~~~~~~~我是分割线~~~~~~~~~~~~~~~~~~~~~

index.jsp:

......

<input type="radio" id="ok1" value="ok1" checked="checked" οnclick="aCheck1()" />显示“我是A”

<input type="radio"id="ok2" value="ok2" οnclick="bCheck2()" />显示“我是B”   <br/> 

......

 

<span id="span1" style="display:block">我是A</span>

<span id="span2" style="display:none">我是B</span>

 

Js:

function aCheck1(){

document.getElementById("span1").style.display="block";

document.getElementById("span2").style.display="none";

}

function bCheck2(){

document.getElementById("span1").style.display="none";  

document.getElementById("span2").style.display="block";

}  

因为span1的display原始属性是block，所以打开页面index.jsp会显示span1的内容。选择不同单选按钮时，会调用不同的js方法，改变各个span的display值，来控制显示不同的内容。