如何隐藏图像/显示输入时勾选复选框，并显示图像/隐藏输入复选框时再次？

如何隐藏图像/显示输入时勾选复选框，并再次显示图像/隐藏输入复选框时？如何隐藏图像/显示输入时勾选复选框，并显示图像/隐藏输入复选框时再次？

缩略图：

<div id="thumbnail_image"> 
    <img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg"> 
</div> 

<input type="file" name="offer_image_1" id="offer_image_1" size="30" hidden "> 
<br> 
<input type="checkbox" id="change_thumbnail_image" name="change_thumbnail_image" value="change_thumbnail_image" class="checkme_ram" /> Change Thumbnail Image 

<script type="text/javascript"> 
document.getElementById('change_thumbnail_image').onchange = function() { 
    document.getElementById('thumbnail_image').hidden = this.checked; 
    document.getElementById('offer_image_1').block = this.checked; 
}; 
</script>

来源

2013-11-27 user3030013

使用jQuery，您可以使用.toggle()

jQuery(function ($) { 
    $('#change_thumbnail_image').change(function() { 
     $('#thumbnail_image, #offer_image_1').toggle(this.checked); 
    }).change(); //trigger the change event so that the initial display is set properly 
})

当使用vanila脚本，你需要设置显示样式属性像

document.getElementById('thumbnail_image').style.display = this.checked ? 'block' : 'none';

来源

2013-11-27 07:26:10

非常感谢你^ _ ^ – user3030013

试试这个，

与jQuery

jQuery('#change_thumbnail_image').change(function() { 
if(jQuery("#change_thumbnail_image").is(':checked')){ 

jQuery("#thumbnail_image").hide(); 
jQuery("#offer_image_1").show(); 
} 
else{ 
jQuery("#thumbnail_image").show(); 
jQuery("#offer_image_1").hide(); 

} 
});

来源

2013-11-27 07:29:16

我仍然怀疑笏ü问..但它似乎像你问这个..

<!doctype html> 
    <html> 
     <head> 

     </head> 
     <body> 
      <div id="thumbnail_image"> 
       <img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg"> 
      </div> 

      <input type="file" name="offer_image_1" id="offer_image_1" size="30" hidden "> 
      <br/><br/> 
      <input type="checkbox" id="change_thumbnail_image" name="change_thumbnail_image" value="change_thumbnail_image" class="checkme_ram" /> Change Thumbnail Image 

      <script type="text/javascript"> 
       document.getElementById('change_thumbnail_image').onchange = function() { 
        document.getElementById('thumbnail_image').hidden = this.checked; 
        document.getElementById('offer_image_1').hidden = !this.checked; 

       }; 
      </script> 
     </body> 
    </html>

来源

2013-11-27 07:35:54

如何隐藏图像/显示输入时勾选复选框，并显示图像/隐藏输入复选框时再次？

回答

相关问题