Javascript 使用jQuery显示/隐藏复选框

我正在尝试根据复选框显示/隐藏html表单的一部分。这是我的基本代码：

<script src="/js/jquery.js"></script>
<script language="JavaScript">
    function toggle(className){
        var $input = $(this);
        if($(this).prop('checked'))
            $(className).show();
        else
            $(className).hide();
        }
</script>

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

函数切换（类名）{
var$input=$（此）；
if（$（this.prop（'checked'））
$（className.show（）；
其他的
$（className.hide（）；
}
检查这里
这是文本

---

当您单击复选框时，跨度将被隐藏且不会返回。我还使用了

$（this）.is（':checked'）

。无论是否选中，

$（this）.prop（'checked'）

的计算结果似乎都为false。我最好的猜测是我使用的

$（this）

不正确。我在这里缺少什么？

使用一个非内联的事件处理程序，然后根据复选框状态对元素执行

toggle（）

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


$（函数（）{
$（'input[type=“checkbox”]”）。在（'change'，function（）上{
$（this）.closest（'fieldset'）.find（'.myClass'）.toggle（！this.checked）；
});
});
检查这里
这是文本



这甚至可以与具有相同标记的多个字段集一起使用。
HTML，通过单击事件传递
This

<input type="checkbox" onclick="toggle('.myClass', this)" ></legend>

或者，无需使用
prop
即可：

function toggle(className, obj) {
    if ( obj.checked ) $(className).hide();
    else $(className).show();
}

或者，在一行中使用：

尝试通过jQuery绑定事件，然后可以访问
$（this）
：

尝试：切换（这个，'.myClass'）这可能是一般情况下最好的答案，但它略高于我的技能水平；我只尝试使用我理解的编码。
function toggle(className, obj) {
    if ( obj.checked ) $(className).hide();
    else $(className).show();
}

function toggle(className, obj) {
    $(className).toggle( !obj.checked )
}

$(document).ready(function() {
  $(":checkbox").click(function(event) {
    if ($(this).is(":checked"))
      $(".myClass").show();
    else
      $(".myClass").hide();
  });
});