jQuery: ¿Devuelve el valor de una casilla de verificación como una matriz?

Question

Esto me tiene perplejo. Puedo conseguir fácilmente el valor de una selección múltiple como una matriz, y pasarlo a una petición 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, 
    ... 
    }, 
    ... 
}); 

pero no puedo encontrar ninguna manera equivalente para obtener los valores de una casilla de verificación con múltiples selecciones. Lo obvio no funciona:

<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 

¿Alguna idea? Gracias.

Answer 1

No hay una función jQuery incorporada para eso. Tienes que hacerlo tú mismo. Puede hacerlo con bastante facilidad con un bucle simple:

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

O si solo deseas las controladas queridos:

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

o puede utilizar map y get:

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

O si solo quiere los marcados:

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

---

Nota al pie 1: jQuery requiere que el valor de un selector de valor de atributo (tipo anterior) siempre estar entre comillas, aunque a partir de este escrito a pesar de la documentación que sigue siendo laxa al respecto. Es algo jQuery, pero en este caso también lo necesitaría para CSS (CSS2 Reference | CSS3 Reference) porque su valor incluye [], que no son válidos para valores sin comillas en CSS. (En CSS, sin comillas los valores deben ser identifiers.)

---

Nota al pie 2: Nota Solía ​​this.value en las funciones de iterador de arriba para obtener el valor de la input, en lugar de $(this).val(). Es más o menos una cuestión de estilo, ninguno es mejor que el otro desde todas las perspectivas. this.value es más directo y si conoce el DOM en absoluto (y cada programador web debería), está perfectamente claro. Pero, por supuesto, si bien el navegador cruzado es perfectamente confiable con casillas de verificación y la mayoría de los demás elementos input, no es confiable entre navegadores con otros campos de formulario (por ejemplo, cajas select). $(this).val() es más idiomático en una aplicación que usa mucho jQuery, y no tiene que preocuparse de si this es input o select. Sí, agrega sobrecarga, pero si no tienes miles de ellos, no es como si fuera a importar.

Answer 2

• Si no está familiarizado con el método .map(), permítame presentarle uno de mis favoritos. El ejemplo en la página del manual también tiene casillas de verificación. El método .get() se puede usar para transformar una colección jQuery en un objeto.

.map(): Pass cada elemento en el actual conjunto combinado a través de una función, la producción de un nuevo objeto jQuery que contiene los valores de retorno.

• Otros conocimientos que necesita es que tienes que escapar [] con barras invertidas en el interior del selector de atributos: name=check\[\]]. Editar: Por supuesto, si se utiliza la sintaxis selector de atributos estándar, no habrá ningún problema: name="check[]"

Algo como esto sería suficiente:

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

jsFiddle Demo

Answer 3

Yo pensaría serialize() y serializeArray() matriz funcionaría, pero aparentemente se aplican solo a los niños de la selección.

peor caso, yo sólo tiene que utilizar map() para obtener la matriz como tal

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