首页 > 代码库 > 利用JavaScript通过单选框radio控制div的显示和隐藏
利用JavaScript通过单选框radio控制div的显示和隐藏
通过鼠标单击单选框的动作，实现某个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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。