[Jquery] Numero di input legato al valore della checknbox

[robertino_salemi]

Salve a tutti,
avrei bisogno di generare un numero di input pari al valore selezionato in checkbox.

Mi spiego meglio:
- ho un form in cui mostro n checkbox con valore progressivi, ad esempio da 1 a 6.
- quando l'utente seleziono una di esse (è possibile selezionarne solo una!) nel form sotto mi vengono visualizzati un numero di input pari al valore della mia checkbox.

Oppure, potrei creare a priori queste input di numero da 1 a 6 e settarle a display: none e a click mostrare solo quelle il cui valore è sempre dettato dalla checkbox.

Come potrei fare?

Grazie.

[Daniels118]

Quando vuoi che venga selezionata al massimo una casella per volta devi usare l'oggetto "option" che gestisce nativamente questa caratteristica senza che debba essere tu ad implementarla.

Se vuoi che cambiando la selezione vengano preservati i valori dei campi già visibili ti conviene creare tutti i campi ed impostare display:none per nasconderli.
Puoi implementarla in questo modo:
1) utilizzando un opportuno selettore jQuery ottieni l'insieme dei campi
2) attraverso il metodo each vai ad analizzare ciascun campo e:
- se l'indice è minore del numero selezionato richiami sul campo il metodo show
- in caso contrario richiami il metodo hide

In alternativa puoi generare dinamicamente i campi in questo modo:
prima di tutto crea un contenitore per i tuoi campi di input ed assegnagli un id;
all'evento change dell'option associa una funzione che:
1) recupera il valore selezionato;
2) svuota il contenitore con il metodo empty;
3) attraverso un ciclo for crea i campi di input;
4) ad ogni campo associa un attributo name che contiene l'indice del ciclo, in modo che siano tutti diversi;
5) inserisce il campo creato nel contenitore con il metodo appendTo.

[OoZic]

http://jsfiddle.net/t6PW4/

js:

$('.radio-number').on('change', function () {
    var n = $(this).data('number');
    for (var i = 0; i < n; i++) {
        $('#input' + n).removeClass('hidden');
    }
});

lascio a te completare la funzione per ri-aggiungere la classe hidden nel caso uno cambi selezione.

ps: se si parla di una sola scelta non si parla di checkbox ma di radio

[wingman87]

L'hanno già detto ma lo ribadisco, per favore non usare i checkbox al posto dei radio! Non uccidere l'html! A lavoro ho visto cose... che non vorrei più rivedere, neanche in un forum.

[robertino_salemi]

Che dire...grazie a tutti per il supporto e i consigli!

Daniels118: sei stato molto dettagliato e hai reso bene l'idea di ciò che dovrei creare.
Per fortuna so a priori qual è il valore massimo che l'utente potrà selezionare, quindi mi creo gli input che mi servono e me li setto a display:none (come da te indicato!) e successivamente li visualizzo.

OoZic: grazie per aver postato una buona parte della soluzione, vedo di fare la visualizzazione per nasconderli e postarla.
Magari al cambio del valore della checkbox faccio in modo che vengano nascosti tutti e subito dopo applico quella da te indicata.

wingman87: hai perfettamente ragione, è stato un mio errore, si tratta di radio e non checkbox.

Grazie ancora!

[robertino_salemi]

Ecco la soluzione finale, funziona!

http://jsfiddle.net/t6PW4/2/

[Daniels118]

Ti conviene non specificare "checked" nell'html, oppure forzare l'evento change al caricamento della pagina, altrimenti se si vuole scegliere la prima opzione bisogna per forza selezionarne prima un'altra e poi premere sulla prima.

PS. invece di utilizzare una classe per rendere invisibili i campi prova i metodi hide e show, ti consentono di specificare la velocità con cui far apparire/scomparire gli elementi producendo un effetto più gradevole alla vista.

[robertino_salemi]

Originariamente inviato da Daniels118

Ti conviene non specificare "checked" nell'html, oppure forzare l'evento change al caricamento della pagina, altrimenti se si vuole scegliere la prima opzione bisogna per forza selezionarne prima un'altra e poi premere sulla prima.

Daniels, non ho capito cosa vuoi dire...il codice postato funziona correttamente!

[Daniels118]

Aprendo il tuo esempio la prima opzione è già selezionata ma non è presente nessun campo; cliccando su tale opzione non succede nulla. Se si vuole scegliere la prima opzione, per rendere visibile il campo bisogna prima selezionare la seconda e poi ripremere sulla prima.

Così invece si può premere subito sulla prima opzione e vedere il campo:
http://jsfiddle.net/t6PW4/4/

Oppure in quest altro modo vengono visualizzati subito i campi associati all'opzione selezionata:
http://jsfiddle.net/t6PW4/5/

[robertino_salemi]

Grazie Daniels, ottima consiglio, non avevo prestato attenzione a questo problema.

Grazie!