Mostra/nascondi con la casella di controllo usando jQuery

Question

Sto provando ad avere una sezione di un modulo html da mostrare/nascondere in base a una casella di controllo. Questo è il codice di essenza che ho:

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

Quando si fa clic sulla casella di controllo, lo span viene nascosto e non ritorna. Ho anche usato $(this).is(':checked'). Sembra che $(this).prop('checked') stia valutando false se è selezionato o meno. La mia ipotesi migliore è che sto usando $(this) in modo errato. Cosa mi manca qui?

Answer 1

HTML, passare this dall'alto evento click

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

JS

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

O, senza utilizzare prop si può solo fare:

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

O, in una riga utilizzando .toggle(display):

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

Answer 2

Utilizzare un gestore di eventi che is'nt linea, e poi basta toggle() l'elemento in base allo stato casella di controllo:

<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

Questo sarebbe anche lavorare con diversi fieldset di con lo stesso margine di profitto.

Answer 3

provare evento vincolante tramite jQuery, e quindi è possibile accedere a $(this):

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