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