通过鼠标单击单选框的动作,实现某个div或多个div的显示和隐藏。实例如下:
<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;
}
}
lt;/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>