MICHELEPISANI.IT
 

Ottenere i valori delle checkbox selezionate senza il submit

Recuperare tramite jQuery i valori delle checkbox selezionate

Ottenere i valori delle checkbox selezionate senza il submit con jQuery
March 15
07:062015

Per chi non si è ancora imbattuto nel problema di recuperare i valori a runtime di un gruppo di checkbox selezionate all'interno di una pagina web o di un gruppo identificato di elementi, è possibile, tramite jQuery, crearsi una funzione apposita che restituisce una stringa di valori separati da un carattere identificato (ad esempio il pipe o la virgola) con la finalità di passarli a funzioni successive o ad una particolare pagina in ajax per essere elaborati.
Riporto di seguito un esempio che ho creato, testato e funzionante, dove sono presenti due gruppi di checkbox e per mezzo di due bottoni è possible recuperare i valori di quelle selezionate rispettivamente solo del primo gruppo o di tutte le checkbox presenti nella pagina.

La parte HTML:

<input type="checkbox" value="1" name="primo_settore" />
<input type="checkbox" value="2" name="primo_settore" />
<input type="checkbox" value="3" name="primo_settore" />
<br />
<input type="checkbox" value="4" name="secondo_settore" />
<input type="checkbox" value="5" name="secondo_settore" />
<input type="checkbox" value="6" name="secondo_settore" />
<br />
<input type="button" id="btn_1" value="controlla solo le checkbox del primo settore" />
<br />
<input type="button" id="btn_2" value="controlla tutte le checkbox della pagina" />


Le funzioni in jQuery:

$("#btn_1").on('click', function () {
    var checkbox_value = "";
    $("input[name=primo_settore]").each(function () {
        var ischecked = $(this).is(":checked");
        if (ischecked) {
            checkbox_value += $(this).val() + ",";
        }
    });
    alert(checkbox_value);
});

$("#btn_2").on('click', function () {
    var checkbox_value = "";
    $(":checkbox").each(function () {
        var ischecked = $(this).is(":checked");
        if (ischecked) {
            checkbox_value += $(this).val() + ",";
        }
    });
    alert(checkbox_value);
});


Ho inserito l'esempio su JSFiddle e potete verificarne il funzionamento direttamente nel contenitore seguente cliccando sul tab "Result":



Tags

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

10 Commenti

  1. noe Thursday, December 1, 2016 alle ore 13:57

    Mi piace e la ringrazio.
    Ma nel caso in cui avessi una tabella di records da checkare tutti record oppure in modo selettivo da visualizzare o inviare ad un controller. come recuperare valori dei records con jquery?
    Grazie

    Rispondi a questo commento
  2. noe Friday, December 2, 2016 alle ore 10:26

    Ciao Michele,
    supponiamo che ho una tabella con 3 colonne nome, età, la terza colonna è un checkbox, il numero di records della tabella è relativo, posso avere 10 , 100, 1000 records... la domanda è :come faccio ad identificare gli ID di ciascun checkbox? in modo da potere sceglier tutta la lista o in modo selettivo. Grazie

    Rispondi a questo commento
    • Michele PisaniAutore Saturday, December 3, 2016 alle ore 10:50

      Immagino che recupererai le informazioni da un database, pertanto in questo caso basta che nel momento della creazione della tabella, con linguaggio server side, assegni l'id in base all'identificativo univoco che quella riga ha nel database.
      Un esempio in PHP può essere il seguente:




      for ($i = 1; $i <= 10; $i++) {

      echo "nome_id_$i," . "eta_id_$i," . "<input type='checkbox' name='checkbox_$i' id='checkbox_$i' value='valore_id_$i'>";

      }



      Nel caso specifico ho simulato un ciclo di 10 righe ed ho assegnato al valore dell'id della checkbox il numero incrementale di $i (in questo modo sono certo che sono tutti id diversi). Ma recuperando dal database le righe con una query potrei senza problemi effettuare un ciclo tante volte quanto è la lunghezza dell'array estratto ed inserire l'id della riga estratta dal database al posto di $i, in questo modo avresti sia un id univoco per ogni checkbox che l'id effettivo corrispondente alla righa nel database per poterci effettuare operazioni successive (update, delete,...).

      Rispondi a questo commento
      • Nore Saturday, December 3, 2016 alle ore 14:59

        Grazie, grazie

  3. antonio Sunday, October 4, 2020 alle ore 22:36

    Potresti indicarmi come fare la somma di 5 checkbox caricate da un database?

    Rispondi a questo commento
    • Michele PisaniAutore Sunday, October 4, 2020 alle ore 22:52

      Ciao antonio,
      non ho chiaro cosa implichi il fatto che siano caricate da un database, ad ogni modo per la somma il principio è lo stesso di quello che vedi nell'esempio, solo che anziché concatenare i valori in una stringa li sommi facendone il parseInt di ciascuno.

      Rispondi a questo commento
  4. yurii conte Thursday, December 17, 2020 alle ore 13:09

    Ciao vorrei sapere se fosse possibile eseguire l'operazione inversa del recupero valore checkbox in textarea e cioè dal valore della textarea selezionare le checkbox

    Rispondi a questo commento
    • Michele PisaniAutore Thursday, December 17, 2020 alle ore 13:32

      Ciao yurii,
      certo che è possibile, potresti avviare la funzione di controllo del valore della textarea (e successiva gestione delle checkbox) al blur dalla textarea stessa anziché al clic su un bottone.

      Rispondi a questo commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Il Canale YouTube in ITALIANO

1 VIDEO GRATIS ogni 2 settimane! ISCRIVITI!

Entra a far parte della community su Facebook

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Hai verificato se succede per tutte le pagine da un certo periodo di tempo in poi o solo su alcune?

Tecnowiz

Sono amministratore di un blog pure io... Intanto ti faccio i complimenti per questo articolo. …

Michele Pisani

Ciao Antonio, grazie per la fiducia :) In caso di più fogli è necessario inserire il codice del …

Antonio

Ciao Michele, ho acquistato il tuo libro che unitamente ai tuoi video sta diventando il mio corso …