Zeigen Sie eine andere Option, wenn das Kontrollkästchen ausgewählt ist

Question

Ich habe Probleme beim Versuch, "T-Shirt" Größen zu zeigen, wenn ein Kontrollkästchen ausgewählt ist. Ich benutze jQuery, aber ich bin nicht in der Lage, den Code richtig funktionieren zu lassen. Hier ist mein Code so weit:

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

Derzeit werden die ID "Größen" auf display: none via CSS. Was ich brauche, ist, wenn ein Benutzer das Kontrollkästchen mit der ID "Tshirt" auswählt, möchte ich die ID "Größen" angezeigt werden. Jede Hilfe wird sehr geschätzt!

Answer 1

Sie benötigen Code in einem click() Handler zu setzen, wie folgt aus:

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

Diese #sizes zeigen wird, wenn das Kontrollkästchen aktiviert ist, und wird sie wieder ausgeblendet, wenn es un-geprüft ist.

Es ist unklar, warum Sie $('#tshirt').attr('checked'); in Ihrem aktuellen JS haben, da Sie checked="checked" einfach zu Ihrem <input> hinzufügen können, um es beim Laden der Seite zu überprüfen.

Answer 2

.toggle() sollte sich darum kümmern. So etwas wie dieses ..

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

'langsam' können Sie durch 'schnell' und andere Parameter ersetzen.

Answer 3

Sie sollten in der Lage sein, so etwas zu tun:

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

Dann nur sicherstellen, dass standardmäßig mit CSS versteckt ist:

#sizes { 
    display: none; 
}