选中单选按钮后显示其他表单元素

纸上得来终觉浅，看了JSP的范例宝典，还是决定把书本的例子操作一遍才安心。

今天在老是把none写成nono,结果老是隐藏不了。

style="display: none";

本实例主要利用javascript设置表格的display样式来实现表格的显示和隐藏。将表格的display样式设置为none，可以控制表格的隐藏，将表格的display样式设置为block，

可以显示表格。

View Code

 1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9   <head>
10     <base href="<%=basePath%>">
11     
12     <title>选中单选按钮后显示其他表单元素</title>
13     
14     <meta http-equiv="pragma" content="no-cache">
15     <meta http-equiv="cache-control" content="no-cache">
16     <meta http-equiv="expires" content="0">    
17     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
18     <meta http-equiv="description" content="This is my page">
19     <!--
20     <link rel="stylesheet" type="text/css" href="styles.css">
21     -->
22 
23   </head>
24   
25   <body>
26   <input name="user" type="radio" onClick="im1.style.display='block';im2.style.display ='none';" value="0" checked>普通用户
27   <input type="radio" name="user" value="1" onClick="im2.style.display ='block';im1.style.display ='none';">超级用户
28  <table width="448" border="0" id="im1" style="display:nono">
29         <tr>
30           <td>
31             <input name="shenhe" type="checkbox" id="shenhe2" value="1">
32       批示功能</td>
33           <td>
34             <input name="huiyi" type="checkbox" id="huiyi2" value="1">
35       会议管理</td>
36           <td>
37             <input name="gonggong" type="checkbox" id="gonggong2" value="1">
38       公共信息管理 </td>
39           <td>
40             <input name="geren" type="checkbox" id="geren2" value="1">
41       审核个人登记活动 </td>
42         </tr>
43       </table>
44       <table  style="display: none" id="im2">
45           <tr>
46               <td>  <input name="geren" type="checkbox" id="geren2" value="1">超级管理员权限</td>
47           </tr>
48       </table>
49    <table> 
50     <tr bgcolor="#F3F3F3">
51       <td height="23" colspan="6"><div align="center">
52         <input type="submit" name="Submit" value="提交"> 　
53         <input type="reset" name="Submit2" value="重置">
54       </div></td>
55     </tr>
56   </table>
57   <div style= "display:none "> ok </div> 
58   
59   </body>
60 </html>

posted on 2012-10-08 22:01 天吧8 阅读(326) 评论(0) 编辑收藏举报