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

时间:2014-02-24 01:50:20

标签: javascript jquery

此代码似乎显示在选中此框时消失的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,不是解决方案。

1 个答案:

答案 0 :(得分: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.