jQuery: restituisce il valore di una casella di controllo come matrice?

Question

Questo mi ha perplesso. Posso facilmente ottenere il valore di una selezione multipla come un array, e passarlo a una richiesta AJAX:

<select id="countries" class="multiselect" multiple="multiple" name="countries[]"> 
    <option value="AFG">Afghanistan</option> 
    <etc> 
... 
$countries_input = $("#countries"); 
var countries = $countries_input.val(); 
$.ajax({ 
    data: { 
    country : countries, 
    ... 
    }, 
    ... 
}); 

ma non riesco a trovare alcun modo equivalente per ottenere i valori di una casella di controllo con selezioni multiple. Le cose ovvie non funzionano:

<input type="checkbox" name="check[]" value="foo1"/>foo1<br/> 
<input type="checkbox" name="check[]" value="foo2"/>foo2<br/> 
... 
var bar = $('input:checkbox[name=check]').val();   // undefined 
var bar = $('input:checkbox[name=check[]]').val();  // also undefined 
var bar = $('input:checkbox[name=check]:checked').val(); // also undefined 

Qualche idea? Grazie.

Answer 1

Non esiste una funzione jQuery integrata per questo. Devi farlo da solo. Si può fare abbastanza facilmente con un semplice ciclo:

var vals = [] 
$('input:checkbox[name="check[]"]').each(function() { 
    vals.push(this.value); 
}); 

O se desideri solo quelli controllato:

var vals = [] 
$('input:checkbox[name="check[]"]').each(function() { 
    if (this.checked) { 
     vals.push(this.value); 
    } 
}); 

Oppure si può usare map e get:

var vals = $('input:checkbox[name="check[]"]').map(function() { 
    return this.value; 
}).get(); 

Or se si desidera solo quelli controllati:

var vals = $('input:checkbox[name="check[]"]').map(function() { 
    return this.checked ? this.value : undefined; 
}).get(); 

---

laterale nota 1: jQuery richiede che il valore di un selettore valore di attributo (tipo sopra) sempre essere tra virgolette, anche se al momento della stesura nonostante documenta che è ancora permissivo su di esso. È una cosa jQuery, ma in questo caso ne avresti bisogno anche per i CSS (CSS2 Reference | CSS3 Reference) perché il tuo valore include [], che non sono validi per valori senza virgolette in CSS. (In CSS, senza virgolette i valori devono essere identifiers.)

---

Side Nota 2: Nota ho usato this.value nelle funzioni iteratore sopra per ottenere il valore del input, piuttosto che $(this).val(). È praticamente solo una cosa di stile, nessuno dei due è migliore dell'altro da tutti i punti di vista. this.value è più diretto e se conosci il DOM (e ogni programmatore web dovrebbe), è perfettamente chiaro. Ma ovviamente, mentre cross-browser perfettamente affidabile con le checkbox e la maggior parte degli altri elementi input, non è affidabile cross-browser con alcuni altri campi modulo (caselle select, ad esempio). $(this).val() è più idiomatico in un'applicazione jQuery intensiva e non devi preoccuparti se lo this è un input o un select. Sì, aggiunge un sovraccarico, ma se non ne hai migliaia, non è come se interessasse.

Answer 2

• Se non si ha familiarità con il metodo .map(), è possibile inserire uno dei miei preferiti. L'esempio nella pagina di manuale include anche le caselle di controllo. Il metodo .get() può essere utilizzato per trasformare una raccolta jQuery in un oggetto.

.map(): Passo ciascun elemento della corrente MATCHED fissato tramite una funzione, producendo un nuovo oggetto jQuery contiene i valori di ritorno.

• Altro conoscenze necessarie è che si deve fuggire [] con backslash all'interno del selettore di attributo: name=check\[\]]. Edit: Naturalmente se si utilizza la sintassi selettore di attributo standard, non ci sarà nessun problema: name="check[]"

Qualcosa di simile sarebbe sufficiente:

var checkedValues = $('input:checkbox[name="check[]"]:checked').map(function() { 
    return $(this).val(); 
}).get(); 

jsFiddle Demo

Answer 3

penserei serialize() e l'array serializeArray() funzionerebbe, ma a quanto pare si applicano solo ai bambini della selezione.

peggiore caso vorrei solo usare map() per ottenere la matrice in questo modo

country : $("your input selector").map(function() {return $(this).val();})