Come usare jQuery per mostrare / hide i div in base alla selezione del pulsante di scelta?

Ho alcuni pulsanti di opzione e mi piacerebbe avere div diverse nascoste mostrate in base a quale pulsante di opzione è selezionato. Ecco come appare l’HTML:

.... .desc { display: none; } ....
lorem ipsum dolor
consectetur adipisicing
sed do eiusmod tempor

Ed ecco il mio jQuery:

 $(document).ready(function(){ $("input[name$='group2']").click(function() { var test = $(this).val(); $("#"+test).show(); }); }); 

Il motivo per cui lo sto facendo in questo modo è perché i miei pulsanti radio e le mie div sono generate dynamicmente (il valore del pulsante di opzione avrà sempre un div corrispondente). Il codice sopra funziona parzialmente – i div appariranno quando viene selezionato il pulsante corretto, ma ho bisogno di aggiungere del codice per hide nuovamente i div dopo che il pulsante è deselezionato. Grazie!

Aggiornamento 2015/06

Poiché jQuery si è evoluto da quando la domanda è stata postata, l’approccio raccomandato ora sta usando $.on

 $(document).ready(function() { $("input[name=group2]").on( "change", function() { var test = $(this).val(); $(".desc").hide(); $("#"+test).show(); } ); }); 

o al $.ready() fuori $.ready()

 $(document).on( "change", "input[name=group2]", function() { ... } ); 

Risposta originale

Dovresti usare il gestore di eventi .change() :

 $(document).ready(function(){ $("input[name=group2]").change(function() { var test = $(this).val(); $(".desc").hide(); $("#"+test).show(); }); }); 

dovrebbe funzionare

Basta nasconderli prima di mostrarli:

 $(document).ready(function(){ $("input[name$='group2']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#"+test).show(); }); }); 
 $(document).ready(function(){ $("input[name=group1]").change(function() { var test = $(this).val(); $(".desc").hide(); $("#"+test).show(); }); }); 

È l’ input[name=group1] corretto input[name=group1] in questo esempio. Tuttavia, grazie per il codice!

Una soluzione interessante è quella di rendere questo dichiarativo: basta dare ad ogni div che deve essere mostrato un attributo automaticallyVisibleIfIdChecked con l’id della checkbox o del pulsante radio da cui dipende. Cioè, il tuo modulo ha questo aspetto:

 
....
lorem ipsum dolor
consectetur adipisicing

e avere qualche JavaScript indipendente dalla pagina che usi bene la programmazione funzionale:

 function executeAutomaticVisibility(name) { $("[name="+name+"]:checked").each(function() { $("[automaticallyVisibleIfIdChecked=" + this.id+"]").show(); }); $("[name="+name+"]:not(:checked)").each(function() { $("[automaticallyVisibleIfIdChecked=" + this.id+"]").hide(); }); } $(document).ready( function() { triggers = $("[automaticallyVisibleIfIdChecked]") .map(function(){ return $("#" + $(this).attr("automaticallyVisibleIfIdChecked")).get() }) $.unique(triggers); triggers.each( function() { executeAutomaticVisibility(this.name); $(this).change( function(){ executeAutomaticVisibility(this.name); } ); }); }); 

Analogamente è ansible abilitare / disabilitare automaticamente i campi modulo con un attributo automaticallyEnabledIfChecked .

Penso che questo metodo sia piacevole poiché evita di dover creare JavaScript specifico per la tua pagina – basta inserire alcuni attributi che dicono cosa dovrebbe essere fatto.

La semplice fonte jquery per lo stesso –

 $("input:radio[name='group1']").click(function() { $('.desc').hide(); $('#' + $("input:radio[name='group1']:checked").val()).show(); }); 

Per renderlo un po ‘più appropriato basta aggiungere il check alla prima opzione –

 

rimuovi la class .desc dallo stile e modifica i div come –

 
lorem ipsum dolor

sembrerà davvero buono in ogni modo.