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

本文介绍了一种使用JavaScript和HTML实现单选按钮控制不同DIV元素显示与隐藏的方法。通过单选按钮的选择,可以切换两个不同的DIV显示状态,适用于动态网页内容的控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


    通过鼠标单击单选框的动作,实现某个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>


 
 
     

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值