如何隱藏圖像/顯示輸入時勾選複選框，並顯示圖像/隱藏輸入複選框時再次？

如何隱藏圖像/顯示輸入時勾選複選框，並再次顯示圖像/隱藏輸入複選框時？如何隱藏圖像/顯示輸入時勾選複選框，並顯示圖像/隱藏輸入複選框時再次？

縮略圖：

<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

如何隱藏圖像/顯示輸入時勾選複選框，並顯示圖像/隱藏輸入複選框時再次？

回答

相關問題