Come recuperare i valori delle caselle di controllo in jQuery

240

Come usare jQuery per ottenere i valori delle caselle di controllo selezionate e metterlo immediatamente in un'area di testo?

Proprio come questo codice:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

Se il id="c_d"viene aggiornato da Ajax , la parte inferiore del codice di altCognito non funziona. C'è qualche buona soluzione?

jquery html checkbox

— lanqy
fonte

volevi tutto o uno alla volta?

— TStamper,

Come possiamo 'selezionare' la casella con un dato valore / etichetta? dici "one_name2"?

— Amitd,

5

@Amitd usa $ ("input [name = one_name2]"). Attr ('checked', true);

— Mark Schultheiss,

grazie che ha funzionato bene..anche per il tipo di radio. 1 voto in alto :)

— Amitd,

320

Eccone uno che funziona ( vedi l'esempio ):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

Aggiornare

Un certo numero di mesi dopo è stata posta un'altra domanda su come far funzionare quanto sopra se l'ID cambia. Bene, la soluzione si riduce a mappare la funzione updateTextArea in qualcosa di generico che utilizza le classi CSS e ad utilizzare la funzione live per monitorare il DOM per tali modifiche.

— CGP
fonte

2

Ah ah! Eccellente. Hai preso in considerazione entrambi i possibili scenari. Ottimo lavoro signore. ;)

— KyleFarris,

Come possiamo 'selezionare' la casella con un dato valore / etichetta? dici "one_name2"?

— Amitd,

6

Mi piace usare map per cose come questa: $ (': checked', '#c_b'). Map (function (i, cb) {return cb.value}) .get (). Inoltre, questa è solo una preferenza personale, ma separerei ottenere i valori dalla modifica delle aree di testo, qualcosa del tipo: $ (function () {$ ('# input_c_b'). Click ($ ('# t'). Val ($ (': checked', '#c_b'). map (function (i, cb) {return cb.value}) .get ())); $ ('# input # # c_b: primo'). triggerHandler (' fai clic su ");});

— Brandon,

usa $(document).on("click", "#c_b input", updateTextArea);invece per aggirare i problemi di Ajax.

— Goldentoa11,

1

non sei sicuro che questo sia solo in IE (11), ma non dovrebbe esserlo $('#c_b:checked')(enfasi sulla spaziatura)?

— AceMark,

124

Puoi anche restituire tutti i valori delle caselle di controllo selezionate in una stringa separata da virgola. Questo renderà anche più facile per te quando lo invii come parametro a SQL

Ecco un esempio che restituisce tutti i valori delle caselle di controllo selezionati che hanno il nome "chkboxName" in una stringa separata da virgola

Ed ecco il javascript

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(
     function () {return this.value;}).get().join(","));
}

Ecco l'esempio HTML

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>

— Mohamed ElSheikh
fonte

Mi sono appena imbattuto in questo mentre cercavo un modo per ottenere tutti i valori delle caselle di controllo selezionate di un determinato nome e funziona per me con due piccoli problemi. 1) ogni volta che seleziono una casella diversa dalla prima, attiva il segno di spunta nella prima. 2) Quando provo a impostarlo su un array in modo da poter accedere alle informazioni in un secondo momento, si blocca.

— Reverendo Bubbles,

3

Questa è onestamente la risposta migliore. Molto semplice. Vorrei rimuovere la "funzione" e "avviso" in quanto ciò confonde alcune persone, ma il codice è semplice, ben fatto.

— tmarois,

showSelectedValues funziona anche per la decodifica di gruppi di pulsanti di opzione che hanno lo stesso nome

— Matthew Lock,

65

La tua domanda è piuttosto vaga ma penso che questo sia ciò di cui hai bisogno:

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

Modifica: Oh, okay ... eccoti ... non avevi l'HTML prima. Ad ogni modo, sì, ho pensato che volevi mettere il valore in una textarea quando viene cliccato. Se vuoi che i valori delle caselle di spunta siano inseriti nell'area di testo (magari con una bella virgola separata) al caricamento della pagina sarebbe semplice come:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

Modifica 2 Come hanno fatto le persone, puoi anche farlo per scorciatoia al lungo selettore che ho scritto:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... Mi ero completamente dimenticato di quella scorciatoia. ;)

— KyleFarris
fonte

50

Questo funziona perfettamente per me:

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

Grazie Mohamed ElSheikh

— Nic
fonte

1

figo ... questo è l'unico che ha funzionato per il mio loop ajax;) grazie

— Sagive SEO

7

può anche $ ('input [nome = selezione]: controllato'). map (function () {return this.value;}). toArray ()

— ygaradon

8

Grazie altCognito, la tua soluzione ha aiutato. Possiamo anche farlo usando il nome delle caselle di controllo:

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

— Harpreet Bhatia
fonte

6

Quanto segue può essere utile poiché sono arrivato qui alla ricerca di una soluzione leggermente diversa. Il mio script doveva scorrere automaticamente gli elementi di input e doveva restituire i loro valori (per la funzione jQuery.post ()), il problema era con le caselle di controllo che restituivano i loro valori indipendentemente dallo stato verificato. Questa era la mia soluzione:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

Uso:

jQuery(".element").input_val();

Se il campo di input specificato è una casella di controllo, la funzione input_val restituisce un valore solo se è selezionata. Per tutti gli altri elementi, il valore viene restituito indipendentemente dallo stato verificato.

— Andy
fonte

funziona davvero bene, grazie mille ... Ho appena cambiato il "return jQuery (this) .val ();" "restituire vero;" perché nel mio caso è una casella di controllo, devo solo sapere se è selezionata o meno .. grazie!

— TCB13

5

Ecco un'alternativa nel caso in cui sia necessario salvare il valore in una variabile:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map () restituisce un array, che trovo più maneggevole del testo in textarea).

— pgcd
fonte

3

   $(document).ready(function() {
        $(':checkbox').click(function(){
           var cObj = $(this);
           var cVal = cObj.val();
           var tObj = $('#t');
           var tVal = tObj.val();
           if( cObj.attr("checked")) {
              tVal = tVal + "," + cVal; 
              $('#t').attr("value", tVal);
           } else {
              //TODO remove unchecked value.
           }
        });
    });

1

Lo hai complicato troppo. Inoltre, in genere non si imposta il valore di un'area di testo con il parametro value: il valore di una casella di testo è innerHTML. E se dovessi impostare il valore di un elemento, normalmente è meglio usare il metodo 'val ()' per scopi di astrazione del browser.

— KyleFarris,

3

 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

— Satoru
fonte

2

$("#t").text($("#cb").find(":checked").val())

— mkoryak
fonte

1

È possibile selezionare più caselle alla volta.

— KyleFarris,

2

Ad ogni modo, probabilmente hai bisogno di qualcosa del genere:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

Ciò otterrà il valore della prima casella di controllo selezionata nella pagina e lo inserirà nell'area di testo con id='textarea' .

Si noti che nel codice di esempio è necessario inserire le caselle di controllo in un modulo.

— Pim Jager
fonte

2

Questo è sbagliato, isrestituisce un valore booleano, un valore booleano non ha valmetodo.

— non definito il

2

Un modo molto più semplice e breve che sto usando per ottenere lo stesso risultato, usando la risposta di un altro post, è così:

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

Inizialmente le città venivano recuperate da un database MySQL e messe in loop in PHP mentre in loop:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

Ora, usando il codice jQuery sopra, ottengo tutti i valori city_id e rispedisco al database usando $ .get (...)

Questo ha reso la mia vita così facile da quando il codice è completamente dinamico. Per aggiungere più città, tutto quello che devo fare è aggiungere più città nel mio database e non preoccuparmi di PHP o jQuery.

— Zeeshan
fonte

0

Ho avuto un problema simile ed è così che l'ho risolto usando gli esempi sopra:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });

— sam
fonte

0

Prova questo..

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);

— sonida
fonte

0

Se si desidera inserire immediatamente il valore di qualsiasi casella di controllo mentre viene selezionata, ciò dovrebbe funzionare per voi:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})

— duckyflip
fonte

Non tiene conto di più valori e deseleziona le caselle di controllo

— Rob