チェックボックスをオンにしたときに別のオプションを表示する

Question

チェックボックスをオンにしたときに「Tシャツ」サイズを表示しようとしています。私はjQueryを使用していますが、コードを正しく動作させることができません。ここに私のコードは、これまで：CSS経由なし：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#tshirt').attr('checked'); 
     $("#sizes").show(); 
    }); 
); 
</script> 


<b>Cool T-Shirt</b>: <input type="checkbox" id="tshirt" name="tshirt"> <span class="price">$15</span>    
<span id="sizes"><bSize</b>: <input type="checkbox" name="size" value="S"> <span class="price">Small</span></span> 

現在ID「のサイズは、」表示に設定されています。私が助けが必要なのは、ユーザーがID「tshirt」のチェックボックスを選択したときに、ID「サイズ」を表示させたい場合です。どんな助けでも大歓迎です！

Answer 1

あなたはこのように、click()ハンドラ内にコードを配置する必要があります。

$(document).ready(function() { 
    $('input#tshirt').click(function() { 
     if($(this).is(':checked')) { 
      $("#sizes").show(); 
     } else { 
      $("#sizes").hide(); 
     } 
    }); 
}); 

これは、チェックボックスがチェックされたときに#sizesが表示され、それが非確認だ時にそれらを再び非表示になります。

<input>にchecked="checked"を追加するだけで、現在のJSに$('#tshirt').attr('checked');が追加されている理由がわかりません。

Answer 2

.toggle（）が処理します。このようなものがあります。

$('#tshirt').click(function() { 
$('#sizes').toggle('slow', function() { 

'slow'は、 'fast'と他のパラメータで置き換えることができます。

Answer 3

あなたはこのような何かを行うことができる必要があります：

$(document).ready(function() { 
    $("#tshirt").change(function() { 
     if($(this).is(":checked")) { 
      $("#sizes").show(); 
     } else { 
      $("#sizes").hide();    
     } 
    }); 
}); 

それからちょうどCSSと、デフォルトでは非表示になっていることを確認してください。

#sizes { 
    display: none; 
}