Javascript jQuery选中复选框时隐藏div，未选中时显示

我试图在用户单击复选框时隐藏div，并在用户取消选中该复选框时显示它。 HTML:

内容

jQuery：

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

$（'#checkbox1'）。更改（函数（）{
如果（选中此项）{
$（'autoUpdate'）.fadeIn（'slow'）；
}
否则{
$（“#自动更新”）.fadeOut（'slow'）；
}                   
});

---

我很难让它正常工作。

请确保使用

ready

事件

代码：

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

    });
});

HTML

javascript/jquery

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

---

这个问题可能对您有所帮助，我相信这一定是问题所在，因为代码在JSFIDLE上运行良好：我发现了我的问题所在。标签导致了这个问题。如果我删除标签，工作。非常感谢。使用标签的正确方法是：Blabla，因此复选框必须位于标签标记之外！非常感谢你！注意：确保选中了“输入id/类”复选框

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

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

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