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