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

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

 

JavaScript代码如下：

	<script type="text/javascript">
 	function divClick(){

        var show="";
        var apm = document.getElementsByName("AdPrintMode");
        for(var i=0;i<apm.length;i++){
        if(apm[i].checked)
         show = apm[i].value;
        }
      
        switch (show){
            case '1':
                document.getElementById("img1").style.display="none";
                document.getElementById("img2").style.display="block";
                break;
            case '2':
                document.getElementById("img1").style.display="block";
                document.getElementById("img2").style.display="none";
                break;
            case '3':
                document.getElementById("img1").style.display="block";
                document.getElementById("img2").style.display="block";
                break;  
            default:
                document.getElementById("img1").style.display="none";
                document.getElementById("img2").style.display="none";
                break;                                                              
        }
 }
</script>

  其中，show获取的是被选中的radio对应的值。

          img1、img2是将被控制的div的id

 

 

 

HTML代码如下：

<div class="form_row">
 <label>底部打印模式:</label>
 
 <input name="AdPrintMode" type="radio" value="1" οnclick="divClick();" />指定图片
 
 <input name="AdPrintMode" type="radio" value="2" οnclick="divClick();"/>指定二维码+用户心情文字
 <input name="AdPrintMode" type="radio" value="3" οnclick="divClick();"/>无广告 
 
 </div>

       <div class="form_row" id="img1" >
             <label>二维码图片:</label>
              <img src="{$shows.AdQrCodeUrl}" width=80 id="AdQrCodeUrl_img">  
       </div>
             
       <div class="form_row" id="img2">
             <label>底部图片:</label>
             <img src="{$shows.AdImgUrl}" width=300 id="AdImgUrl_img">           
     </div>