如何实现选中单选按钮后显示出其它表单元素?

我希望实现这样的功能:最初页面上有只有三个单选按钮,选中某个单选按钮时,会出现相应的下拉框、文本框等东西。选中不同的单选按钮时出现的东西不一样。请问应该如何实现,需要用脚本吗?如果需要的话,JavaScript应如何实现?

谢谢
---------------------------------------------------------------

---------------------------------------------------------------

例子:

 1<script language="javascript">   
 2<!--   
 3var objOld=undefined;   
 4function toShow(obj){   
 5if(objOld!=undefined)   
 6objOld.style.display='none';   
 7obj.style.display='block';   
 8objOld=obj;   
 9  
10}   
11//-->   
12</script>
1<input id="radio1" name="radio1" onclick="toShow(test1)" type="radio"/>

test1

 1<div id="test1" style="display:none">
 2<table bgcolor="menu" border="1">
 3<tr>
 4<td>test1</td>
 5</tr>
 6<tr>
 7<td><input id="text1" name="text1" type="text"/></td>
 8</tr>
 9<tr>
10<td><input id="text1" name="text1" type="text"/></td>
11</tr>
12</table>
13</div>
1<br/>
1<input id="radio1" name="radio1" onclick="toShow(test2)" type="radio"/>

test2

 1<div id="test2" style="display:none">
 2<table bgcolor="menu" border="1">
 3<tr>
 4<td>test2</td>
 5</tr>
 6<tr>
 7<td><input id="text1" name="text1" type="text"/></td>
 8</tr>
 9<tr>
10<td><input id="text1" name="text1" type="text"/></td>
11</tr>
12</table>
13</div>
1<br/>
1<input id="radio1" name="radio1" onclick="toShow(test3)" type="radio"/>

test3

 1<div id="test3" style="display:none">
 2<table bgcolor="menu" border="1">
 3<tr>
 4<td>test3</td>
 5</tr>
 6<tr>
 7<td><input id="text1" name="text1" type="text"/></td>
 8</tr>
 9<tr>
10<td><input id="text1" name="text1" type="text"/></td>
11</tr>
12</table>
13</div>

---------------------------------------------------------------

我的例子比较笨:)

 1<html>
 2<head>
 3<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
 4<title>无标题文档</title>
 5</head>
 6<body>
 7<input name="radiobutton" onclick="show1()" type="radio" value="radiobutton"/>选项1   
 8<input name="radiobutton" onclick="show2()" type="radio" value="radiobutton"/>选项2   
 9<input name="radiobutton" onclick="show3()" type="radio" value="radiobutton"/>选项3   
10  
11<table bgcolor="#FF0000" border="0" id="t1" style="display:none" width="500">
12<tr>
13<td>显示选项1中的内容</td>
14</tr>
15</table>
16<table bgcolor="#0000FF" border="0" id="t2" style="display:none" width="500">
17<tr>
18<td>显示选项2中的内容;显示选项2中的内容;</td>
19</tr>
20</table>
21<table bgcolor="#00FF00" border="0" id="t3" style="display:none" width="500">
22<tr>
23<td>显示选项3中的内容;显示选项3中的内容;显示选项3中的内容;</td>
24</tr>
25</table>
26<script language="JavaScript" type="text/JavaScript">   
27function show1(){   
28t1.style.display = "block";   
29t2.style.display = "none";   
30t3.style.display = "none";   
31}   
32function show2(){   
33t1.style.display = "none";   
34t2.style.display = "block";   
35t3.style.display = "none";   
36}   
37function show3(){   
38t1.style.display = "none";   
39t2.style.display = "none";   
40t3.style.display = "block";   
41}   
42</script>
43</body>
44</html>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus