码迷,mamicode.com
首页 > 编程语言 > 详细

利用JavaScript通过单选框radio控制div的显示和隐藏

时间:2014-07-18 17:19:47      阅读:392      评论:0      收藏:0      [点我收藏+]

标签:style   blog   java   color   width   io   


    通过鼠标单击单选框的动作,实现某个div或多个div的显示和隐藏。实例如下:

 

JavaScript代码如下:
 1 function divClick(){
 2          
 3        var show = "";
 4        show = $("input[name=‘AdPrintMode‘]:checked").val();
 5        switch (show){
 6            case ‘1‘:
 7                document.getElementById("img1").style.display="none";
 8                document.getElementById("img2").style.display="block";
 9                break;
10            case ‘2‘:
11                document.getElementById("img1").style.display="block";
12                document.getElementById("img2").style.display="none";
13                break;
14            case ‘3‘:
15                document.getElementById("img1").style.display="block";
16                document.getElementById("img2").style.display="block";
17                break;  
18            default:
19                document.getElementById("img1").style.display="none";
20                document.getElementById("img2").style.display="none";
21                break;                                                              
22        }
23 }

 

  其中,show获取的是被选中的radio对应的值。
          img1、img2是将被控制的div的id
 
 
 
HTML代码如下:
1 <div class="form_row">
2 <label>底部打印模式:</label>
3 
4 <input name="AdPrintMode" type="radio" value="1" onclick="divClick(); />指定图片
5 
6 <input name="AdPrintMode" type="radio" value="3" onclick="divClick();/>指定二维码+用户心情文字
7 <input name="AdPrintMode" type="radio" value="4" onclick="divClick();/>无广告 
8 
9 </div>
 1       <div class="form_row" id="img1">
 2             <label>二维码图片:</label>
 3              <img src="{$shows.AdQrCodeUrl}" width=80 id="AdQrCodeUrl_img">
 4         <input id="xFilePath" class=‘form_input‘ name="AdQrCodeUrl" value=‘{$shows.AdQrCodeUrl}‘ type="hidden" size="60"  style=‘width:250px;‘/>    
 5       </div>
 6             
 7       <div class="form_row" id="img2">
 8             <label>底部图片:</label>
 9             <img src="{$shows.AdImgUrl}" width=300 id="AdImgUrl_img">
10             <input id="xFilePath1" class=‘form_input‘ name="AdImgUrl" value=‘{$shows.AdImgUrl}‘ type="hidden" size="60"  style=‘width:250px;‘/>
11     </div>

 

 
 
     

利用JavaScript通过单选框radio控制div的显示和隐藏,布布扣,bubuko.com

利用JavaScript通过单选框radio控制div的显示和隐藏

标签:style   blog   java   color   width   io   

原文地址:http://www.cnblogs.com/jiashu/p/3853195.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!