在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.