在网页的表单中使用单选框与用户进行交互是十分常见的方法，若是给每个选项再配一段选项的内容介绍，使用户在选择的时候做到心中有数，不是效果更好吗？若是每个选项的边上都写上一段说明文字，那就使页面太乱了，使用户不明白你是在作介绍还是在做表单。我们要做的是这样一种效果，在单选框的边上适当地划一块出来显示选项的介绍，随着用户选择不同的选项动态地更换内容，下面的单选框就具有这种效果，请看效果图。
图1
图2
在上面的表单中用了三个单选框组成一个“景点选择单元”，另用一个单行文本框用来显示景点简介，另外用一个按钮链接到已选择景点的相应网页，用HTML是无法实现这种动态效果的。用Javascript做起来并不难，所增加的代码也不多。表单的代码如下：
<form name="jdxzform" method="post" >
<p>
<input type="radio" name="radiobutton" value="hsfg/hsfg.htm"
checked onclick="showjj(1)"> 黄山风景区 </p>
<p>
<input type="radio" name="radiobutton" value="hsfg/gmj.htm"
onclick="showjj(2)"> 黟县古民居</p>
<p>
<input type="radio" name="radiobutton" value="hsfg/qys.htm"
onClick="showjj(3)"> 道教圣地齐云山</p>
<div align="center">景点简介
<input type="text" name="jdjj" size="50"
value="点击景点单选框，在此显示相应景点的简介。">
</div>
<p>
<input type="button" name="Button" value="显示相应的网页"
onclick="showpage()">
</p>
</form>
这个表单的代码与普通表单稍有差别：
1、三个单选框的value参数值都是一个网页的地址，这是为了按下“显示相应网页”能实现显示相应网页的效果而设置的；
2、单选框都加了一个onclick事件来调用“showjj”函数来实现在文本框中显示相应的景点简介效果；
3、在按钮中加了一个onclick事件来调用showpage函数以实现按下按钮后能显示已选择的景点对应的网页。那么这两个函数是如何实现这种效果的呢？请看下面的程序代码，为了你看起来方便，把程序的解释写在相应代码的边上：
<script languae="JavaScript">
<!--
function showpage(){ //显示相应网页的函数，供按钮调用
var paageurl; //声明一个存放相应网页地址的变量
for (i=0;i<document.jdxzform.item.length;i++) //对表单中所有表单标记循环检测一遍
{
if (document.jdxzform.item[i].checked) //如果该单选框的checked为真，也就是被选中
pageurl=document.jdxzform.item[i].value; //那么把该单选框中value参数值（即相应的网页地址）赋给pageurl变量。
}
location.href=pageurl; //把pageurl的值（即相应网页的地址）赋给locqtion.href，以显示已被选择的景点对应的网页。
} //显示相应网页的函数结束。
function showjj(n){ //显示被选单选框对应景点的简介，这是一个带参数的函数，其参数就是单选框的顺序号。
var jj //声明一个存放相应景点简介信息的变量
switch(n){ // switch语句开始，它的作用是可以根据条件值的不同，选择执行不同的语句，与if语句类似，在这里就是根据单选框顺序号不同，选择不同的景点简介。
case 1:jj="薄海内外，无如徽之黄山，登黄山，天下无山，观止矣";break; //这里的break语句是不参省的，在这里的作用是当条件满足，就跳出switch语句段。若在switch语句不用break的话，你得到的永远都是最后那一条语句的结果。
case 2:jj="黟县小桃园，烟霞百里间，地多灵草木，人尚古衣冠";break;
case 3:jj="天下无双胜境，江南第一名山——清乾隆";
}
document.all["jdjj"].value=jj; //把景点简介内容赋给“jdjj”的value参数，由于“jdjj”就是那个单行文本框的名称，因此也就是改变了文本框中显示的景点简介内容，从而达到了动态显示相应景点简介的目的。
}
-->
</script>
本文例子的制方法如下：
1、按文中介绍的方法做好表单；
2、把 Javascript程序复制在网页源代码的<head>与</head>之间就一切OK了。
若你所需要的单选框数不是三个，只要在switch语句多加几个"case"就行了，其它无需改动，上面程序代码中双斜杠（//）后是注释，不是程序所必须的，实际应用时可删去。再次提醒一下，程序中要用到的网页元素名称（如本例中的“jdxzform”、“jdjj”等）大小写一定要一致，这是初学者最易犯的错误。
