7

Tengo estos checkboxes:

<input type="checkbox" name="colores" value="Azul" checked/>
<input type="checkbox" name="colores" value="Rojo" />
<input type="checkbox" name="colores" value="Verde" checked/>
<input type="checkbox" name="colores" value="Amarillo" />

¿Cómo puedo hacer con jQuery un arreglo con los checkboxes marcados con checked?

2 respuestas 2

7

//Creamos un array que almacenará los valores de los input "checked"
var checked = [];
//Recorremos todos los input checkbox con name = Colores y que se encuentren "checked"
$("input[name='colores']:checked").each(function ()
{
//Mediante la función push agregamos al arreglo los values de los checkbox
checked.push(($(this).attr("value")));
});
// Utilizamos console.log para ver comprobar que en realidad contiene algo el arreglo
console.log(checked);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="colores" value="Azul" checked/>
<input type="checkbox" name="colores" value="Rojo" />
<input type="checkbox" name="colores" value="Verde" checked/>
<input type="checkbox" name="colores" value="Amarillo" />

1
  • Se puede generalizar a $('input:checked') , aunque aqui pueden ir encerrados en un <fieldset>, por cierto los "name" y "id" deberian ser unicos.
    – elporfirio
    Commented el 30 nov. 2016 a las 23:23
2

Una posibilidad es usar jQuery.map(), cual te crea un array para los checkboxes seleccionados.

$(document).on('click', 'input:checkbox', getCheckedBox);

getCheckedBox();

function getCheckedBox() {
  
  var checkedBox = $.map($('input:checkbox:checked'), 
                         function(val, i) {
                            return val.value;
                         });
  console.clear();
  console.log(checkedBox);
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<input type="checkbox" name="colores" value="Azul" checked/>
<input type="checkbox" name="colores" value="Rojo" />
<input type="checkbox" name="colores" value="Verde" checked/>
<input type="checkbox" name="colores" value="Amarillo" />

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.