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
Marzo 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
Condividi

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.

6 Commenti

  1. noe giovedì 1 dicembre 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 venerdì 2 dicembre 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 sabato 3 dicembre 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 sabato 3 dicembre 2016 alle ore 14.59

        Grazie, grazie

Scrivi un Commento

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

Articoli e Argomenti correlati

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

Ciao Antonio,
ma il tuo apk si chiama 'HelloWorld-release-unsigned.apk'?

Antonio

Grazie michele per la velocità con cui hai risposto, comunque ho seguito la tua guida passo per …

Michele

Ciao Antonio,
probabilmente stai utilizzando un'opzione non prevista per jarsigner e la …

Antonio

Ricevo questo errore da cosa dipende? Illegal option\: …