如何在使用jQuery單擊複選框時顯示隱藏的div？

Question

<div id="name"> 

</div> 

<input type="checkbox" name="myCB" value="A" />Couldn't find the Venue<br /> 

，如果我需要

我需要根據用戶是否點擊與否

Answer 1

<input type="checkbox" name="myCB" value="A" class="toggler" cheked="checked" /> 

，沒有動畫，

$(function(){ 
    $('.toggler').click(function(){ 
     $('div#name').toggle(this.checked); 
    }); 
}) 

cool demo

這一個小動畫

$(function(){ 
    $('.toggler').click(function(){ 
     if (this.checked) { 
      $('div#name').slideDown(); 
     } else { 
      $('div#name').slideUp(); 
     } 
    }); 
})​ 

cool demo too

Answer 2

給您的複選框的ID myCB隱藏之間切換，並顯示在div我可以添加ID或類：

$("#myCB").click(function(){ 

if($("#name").is(":visible")) 
{ 
    $("#name").hide(); 
} 
else 
{ 
    $("#name").show(); 
} 

}); 

，您還可以檢查出.toggle（）函數：

http://api.jquery.com/toggle/

Answer 3

這裏準備使用和簡單的代碼

$('input[name=myCB]').toggle(function() { 
    $("#name").hide(); 
}, function() { 
    $("#name").show(); 
}); 

Answer 4

試試這個：

<div id="name"> 
my div text 
</div> 

<input type="checkbox" name="myCB" id="myCB" value="A"/>Couldn't find the Venue<br /> 

<script> 
$('#myCB').toggle(function() { 
$('#name').hide() 
}, function() { 
$('#name').show() 
}); 
</script>