当使用jQuery单击复选框时，如何显示隐藏的div？

Question

<div id="name">

</div>   

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

如果需要，我可以添加ID或类

我需要在隐藏之间切换并根据是否点击

显示div

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：

$("#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>