在JQuery中单击复选框时显示Div

Question

此代码似乎显示在选中此框时消失的div。

<script src="/js/jquery.js"></script>
<script type="text/javaScript">
    $(function() {
        $('input[type="checkbox"]').on('change', function() {
            $(this).closest('fieldset').find('.myClass').toggle(!this.checked);
        });
    });
</script>

<fieldset>
    <legend>Check Here<input type="checkbox"></legend>
    <span class="myClass">
        <p>This is the text.</p>
    </span>
</fieldset>

如何更改它以仅在检查时显示框而不是在检查之前？

编辑：将其更改为/ !this.checked/this.checked，不是解决方案。

Answer 1

您使用this.checked代替!this.checked。

$(function() {
     $('input[type="checkbox"]').on('change', function() {
         $(this).closest('fieldset').find('.myClass').toggle(this.checked);
     });
});

您还要将.myClass设置为最初隐藏：

span.myClass {
    display:none;
}

jsFiddle here.