Come utilizzare jQuery per mostrare/nascondere i div in base alla selezione dei pulsanti di opzione?

Ho alcuni pulsanti di opzione e mi piacerebbe avere div diverse nascoste visualizzate in base a quale pulsante di opzione è selezionato. Ecco ciò che il codice HTML appare come:Come utilizzare jQuery per mostrare/nascondere i div in base alla selezione dei pulsanti di opzione?

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" name="group1" value="opt1">opt1</label></div> 
    <div><label><input type="radio" name="group1" value="opt2">opt2</label></div> 
    <div><label><input type="radio" name="group1" value="opt3">opt3</label></div> 
    <input type="submit" value="Submit"> 
</form> 

.... 

<style type="text/css"> 
    .desc { display: none; } 
</style> 

.... 

<div id="opt1" class="desc">lorem ipsum dolor</div> 
<div id="opt2" class="desc">consectetur adipisicing</div> 
<div id="opt3" class="desc">sed do eiusmod tempor</div>

Ed ecco il mio jQuery:

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

La ragione per cui sto facendo in questo modo è perché i miei pulsanti di opzione e div vengono generati in modo dinamico (il valore di il pulsante radio 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 nascondere nuovamente i div dopo che il pulsante è deselezionato. Grazie!

fonte

2010-05-05 M Thomas

Nizza Domanda .... –

Come accennato @ ste-yeu, si prega di correggere il selettore a 'Gruppo1' in jQuery :) –

Aggiornamento 2015/06

Come jQuery è evoluta da quando la questione è stata pubblicata, l'approccio consigliato ora sta usando $.on

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

     var test = $(this).val(); 
     $(".desc").hide(); 
     $("#"+test).show(); 
    }); 
});

o all'esterno $.ready()

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

originale risposta

Si dovrebbe usare .change() gestore di eventi:

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

dovrebbe funzionare

fonte

2010-05-05 22:13:45 Zlatev

Basta nascondere prima di mostrare loro:

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

fonte

2010-05-05 22:14:20 albertein

grazie, questo è esattamente quello che mi serviva –

Thanx uomo questo mi ha aiutato .... –

La semplice fonte di jQuery per la stessa -

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

Al fine di renderlo poco più appropriata basta aggiungere controllato per prima opzione -

<div><label><input type="radio" name="group1" value="opt1" checked>opt1</label></div>

classe rimuovere .desc da stile e modificare div come -

<div id="opt1" class="desc">lorem ipsum dolor</div> 
<div id="opt2" class="desc" style="display: none;">consectetur adipisicing</div> 
<div id="opt3" class="desc" style="display: none;">sed do eiusmod tempor</div>

sarà davvero guardare bene un punto qualsiasi modi.

fonte

2012-07-06 06:37:05 Bharat

questo mi ha aiutato, grazie –

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

In questo esempio è corretto input[name=group1]. Tuttavia, grazie per il codice!

fonte

2012-12-14 15:31:34

<script type="text/javascript"> 
$(function() { 
    $("[name=toggler]").click(function(){ 
      $('.toHide').hide(); 
      $("#blk-"+$(this).val()).show('slow'); 
    }); 
}); 
</script> 
</head> 
<body> 
<label><input id="rdb1" type="radio" name="toggler" value="1" />Book</label> 
<label><input id="rdb2" type="radio" name="toggler" value="2" />Non-Book</label> 

<div id="blk-1" class="toHide" style="display:none"> 

    <form action="success1.html"> 

     Name1:<input type="text" name="name"> 
      <input type="submit" name="submit"> 

    </form> 

</div> 
<div id="blk-2" class="toHide" style="display:none"> 

    <form action="success1.html"> 

     Name2:<input type="text" name="name"> 
      <input type="submit" name="submit"> 

    </form> 
</div>

fonte

2013-07-10 11:21:18

Una soluzione interessante è quello di rendere questo dichiarativa: basta dare ogni div che dovrebbe essere mostrato un attributo automaticallyVisibleIfIdChecked con l'id del pulsante casella di controllo o la radio da cui dipende.Cioè, la vostra forma assomiglia a questo:

<form name="form1" id="my_form" method="post" action=""> 
    <div><label><input type="radio" name="group1" id="rdio1" value="opt1">opt1</label></div> 
    <div><label><input type="radio" name="group1" id="rdio2" value="opt2">opt2</label></div> 
</form> 
.... 
<div id="opt1" automaticallyVisibleIfIdChecked="rdio1">lorem ipsum dolor</div> 
<div id="opt2" automaticallyVisibleIfIdChecked="rdio2">consectetur adipisicing</div>

e avere qualche pagina JavaScript indipendente che ben utilizza 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 si potrebbe attivare automaticamente/disattivare i campi del 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.

fonte

2014-08-07 18:40:07

Come utilizzare jQuery per mostrare/nascondere i div in base alla selezione dei pulsanti di opzione?

risposta

Problemi correlati