jQuery ẩn div khi hộp kiểm được chọn, hiển thị trên không được chọn

Question

Tôi đang cố ẩn div khi người dùng nhấp vào hộp kiểm và hiển thị nó khi người dùng bỏ chọn hộp kiểm đó. HTML:

<div id="autoUpdate" class="autoUpdate"> 
    content 
</div> 

jQuery:

<script> 
$('#checkbox1').change(function(){ 
     if (this.checked) { 
      $('#autoUpdate').fadeIn('slow'); 
     } 
     else { 
      $('#autoUpdate').fadeOut('slow'); 
     }     
    }); 
</script> 

Tôi gặp một thời gian khó khăn để làm việc này.

Answer 1

Đảm bảo sử dụng sự kiện ready.

Code:

$(document).ready(function(){ 
    $('#checkbox1').change(function(){ 
     if(this.checked) 
      $('#autoUpdate').fadeIn('slow'); 
     else 
      $('#autoUpdate').fadeOut('slow'); 

    }); 
}); 

Answer 2

HTML

<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label> 
<div id="block">Some text here</div> 

css

#block{display:none;background:#eef;padding:10px;text-align:center;} 

javascript/jquery

$('#cbxShowHide').click(function(){ 
this.checked?$('#block').show(1000):$('#block').hide(1000); //time for show 
});