用switch函数根据选择不同的radio出现不同的视图

html代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title></title>
 5 
 6 <style type="text/css">
 7 #content #contentmain table tbody tr td {
 8 border:0;
 9 height:28px;
10 }
11 #content #contentmain table{
12 text-align: left;
13 width:100%;
14 }
15 .tabel_2{padding:10px;}
16 .coninf table td{line-height: 30px;}
17 .coninf table{width: 100%;line-height: 25px;border-collapse: collapse;}
18 .wxw-table{margin-bottom: 10px;}
19 .wxw-table td{border: 1px solid #c5c5c5;height: 28px;text-align: center;}
20 
21 </style>
22 <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
23 </head>
24 <body>
25 <div id="content">
26 <div id="contentmain">
27 <form>
28 <table class="tabel_2" >
29 <tbody>
30 <tr >
31 <td><input type="radio" name="time" style="width:20px;" id="year" checked="checked"><label>每年</label><input type="radio" name="time" style="width:20px;margin-left:20px;" id="month"><label>每月</label><input type="radio" name="time" style="width:20px;margin-left:20px;" id="week"><label>每周</label><input type="radio" name="time" style="width:20px;margin-left:20px;" id="day"><label>每日</label></td>
32 </tr>
33 <tr>
34 <td class="year">
35 <select style="width:40px;">
36 </select>
37 <label>月</label>
38 <select style="width:40px;margin-left:20px;">
39 </select>
40 <label>天</label>
41 <select style="width:40px;margin-left:20px;">
42 </select>
43 <label>时</label>
44 <select style="width:40px;margin-left:20px;">
45 </select>
46 <label>分</label>
47 </td>
48 <td class="month" style="display:none">
49 <select style="width:40px;">
50 </select>
51 <label>天</label>
52 <select style="width:40px;margin-left:20px;">
53 </select>
54 <label>时</label>
55 <select style="width:40px;margin-left:20px;">
56 </select>
57 <label>分</label>
58 </td>
59 <td class="week" style="display:none">
60 <select style="width:40px;">
61 <option>星期一</option>
62 <option>星期二</option>
63 <option>星期三</option>
64 <option>星期四</option>
65 <option>星期五</option>
66 <option>星期六</option>
67 <option>星期天</option>
68 </select>
69 <select style="width:40px;margin-left:20px;">
70 </select>
71 <label>时</label>
72 <select style="width:40px;margin-left:20px;">
73 </select>
74 <label>分</label>
75 </td>
76 <td class="day" style="display:none">
77 <select style="width:40px;">
78 </select>
79 <label>时</label>
80 <select style="width:40px;margin-left:20px;">
81 </select>
82 <label>分</label>
83 </td>
84 </tr>
85 </tbody>
86 </table>
87 </form>
88 </div>
89 </div>
90 
91 </body>
92 
93 </html>

界面如下图：

js代码：

 1 <script type="text/javascript">
 2 
 3 //radio按钮选择事件
 4 
 5 $("input[name=time]").click(function(){
 6 showCont();
 7 });
 8 
 9 //根据不同的选择显示不同的视图
10 function showCont(){
11 switch($("input[name=time]:checked").attr("id")){
12 case "year":
13 $(".year").css("display","table-cell").siblings().css("display","none"); 
14 break;
15 case "month":
16 $(".month").css("display","table-cell").siblings().css("display","none");;
17 break;
18 case "week":
19 $(".week").css("display","table-cell").siblings().css("display","none");;
20 break;
21 case "day":
22 $(".day").css("display","table-cell").siblings().css("display","none");;
23 break;
24 default:
25 break;
26 }
27 }
<script>

 

视图如下：

 

 



posted @ 2016-09-19 16:29  wxw婉  阅读(844)  评论(0)    收藏  举报