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

来源：互联网发布：linux命令vi怎么退出编辑：程序博客网时间：2024/05/16 13:20

通过鼠标单击单选框的动作，实现某个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" onclick="divClick();" />指定图片  <input name="AdPrintMode" type="radio" value="2" onclick="divClick();"/>指定二维码+用户心情文字 <input name="AdPrintMode" type="radio" value="3" onclick="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>

0 0