Oggi vediamo come far aprire un elemento o semplice select html solamente cliccando su una checkbox grazie a jQuery. Utile per form e web design di tutti i tipi.
La nostra struttura portante
La base del nostro script prevede ovviamente lo scheletro html, che possiamo riassumere molto semplicemente in poche righe di codice:
<input name="click" class="checkbox" type="checkbox" value="click" />Clicca per espandere
<select style="display:none;">
<option value="">Seleziona una scelta
<option value="tua scelta">W Targetweb
</select>
Come vedete ho reso “invisibile” la select da far apparire con display:none via css. In alternativa avrei potuto farlo anche tramite jQuery all’apertura del DOM (non sai di cosa parlo? guarda la guida introduttiva a jQuery).
Rendiamo dinamica la checkbox!
Una volta creata la struttura non ci resta che creare lo script che farà apparire la select al variare del check (status) della stessa. Per farlo usiamo la funzione .change al posto del semplice “click”. Grazie a change possiamo dire a jQuery di eseguire la funzione tutte le volte che l’elemento a cui è applicato cambia di stato (lo stato va impostato poco sotto). Nel nostro caso “l’evento” che scatena il change è la stato checked/unchecked della nostra checkbox.
Subito sotto la dichiarazione della funzione ho iniziato un ciclo if:
A) SE la checkbox (selezionata grazie alla sua classe) ha lo stato checked –> vuol dire che l’utente ci ha cliccato sopra e l’ha selezionata –> recupera l’elemento del DOM successivo (comando “.next()”) e fallo apparire.
B) ALTRIMENTI –>vuol dire che la checkbox è rimasta NON cliccata –> recupera l’elemento del DOM successivo (comando “.next()”) e fallo scomparire (.hide()).
$(document).ready(function() {
$('.checkbox').change(function(){
if ($(this).is(':checked')) {
$(this).next().show();
} else {$(this).next().hide();}
});
});//FINE DOM
Codice completo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gestione checkbox - Targetweb.it</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
//Realizzato da Riccardo Mel
//www.targetweb.it / riky.mel@gmail.com
// Enjoy!
$(document).ready(function() {
$('.checkbox').change(function(){
if ($(this).is(':checked')) {
$(this).next().show();
} else {$(this).next().hide();}
});
});//FINE DOM
</script>
</head>
<body>
<input name="click" class="checkbox" type="checkbox" value="click" />Clicca per espandere
<select style="display:none;">
<option value="">Seleziona una scelta
<option value="tua scelta">W Targetweb
</select>
</body>
</html>
Scarica il codice e Informazioni
La cosa bella è che applicando lo script possiamo gestire molte checkbox: ci basterà mettere l’elemento da far apparire subito dopo la checkbox e mantenere tutte le checkbox con la classe “checkbox”.
Un’ottima soluzione molto veloce e snella per gestire le proprie checkbox (anche multiple) in tutta comodità.
Any Feedback? 😉
Bravo Riccardo….sei davvero in gamba
Bravo Rick, questo mi serviva proprio!…
Complimenti!!
Solo un dubbio: volevo inserire questa check box in un form mail che manda tramite post i dati ad un file di elaborazione..ma non riesco a riprendere i valori selezionati da un utente..mi potresti suggerire la soluzione?
Ciao Andrea, hai provato a usare questo metodo? http://www.targetweb.it/ajax-form-invio-dati-via-post/
ai checkbox devi mettere come name “name[]” per farlo considerare come un array durante l’invio così hai tutti i valori selezionati, era questo il problema? D=
Si mi sono dimenticato di dirti questa cosa ovviamente devi impostare l’array, per recuperare i dati poi usa foreach 😉
Ciao Riccardo,
io sto cercando una cosa molto simile ma che funzioni con un “select option”. Cioè ad una certa opzione mi deve visualizzare la successiva. Ho cercato invano nel web, ci sono diverse soluzioni, ma secondo troppo complesse e per il mio livello veramente incomprensibili. Tu hai una piccola soluzione?
Grazie!
Forse intendi questo=?
http://www.targetweb.it/select-concatenate-jquery-senza-ajax/
😉 Keep Calm and Enjoy Targetweb. 😉
notevole !!!!!
Salve io vorrei l’inverso o meglio scegliere da una select e far visualizzare la check, modificando un pò questo script si potrebbe fare?Grazie
Grazie Riccardo! complimenti era il tutorial che cercavo.
Ma se hai più scelte in checkbox con valori diversi mi sai dire come rilevi il numero di ID della checkbox che hai selezionato? esempio ?
non riesco a venirne a capo, sto iniziando con jquery e non capisco come fare!!
Salve in anzi a tutto i miei migliori complimenti a Riccardo ,che con il suo script “Aprire un elemento/select cliccando su una checkbox ” mi ha risolto quasi un problema .
Volevo chiedere se qualcuno ha provato questo script sostituendo checkbox con RADIO,io ci ho provato ma quando li seleziono mi rimangono tutti aperti.
In attesa saluto