jQueryを使用してチェックボックスを表示/非表示にする

Question

チェックボックスに基づいて表示/非表示にする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> 

、スパンが隠されてますし、戻ってこないだろう。私は$(this).is(':checked')も使用しました。 $(this).prop('checked')は、偽と評価されているかどうかを評価しているようです。私の最高の推測は私が$(this)を間違って使っていることです。私はここで何が欠けていますか？

Answer 1

HTML、

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

クリックイベントでからthisを渡すJS

function toggle(className, obj) { 
    var $input = $(obj); 
    if ($input.prop('checked')) $(className).hide(); 
    else $(className).show(); 
} 

OR、propを使用せずに、あなただけ行うことができます。

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

OR、1ラインでの.toggle(display)を使用して：

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

Answer 2

はインラインis'ntイベントハンドラを使用し、チェックボックスの状態に基づいて、そしてちょうど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> 

FIDDLE

これも同じマークアップでいくつかのフィールドセットのに働くだろう。

Answer 3

はjQueryを介して、結合事象を試し、その後、あなたは$(this)にアクセスすることができます。

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