La clave de todo está en la forma de seleccionar los elementos.
Con esto input[type=checkbox]:checked
estarías seleccionado todos los checkbox chequeados, no necesitas verificación previa al interior del bucle, solamente puedes meter la propiedad (en este caso el id
) dentro del array final.
Si solamente necesitas los ids, puedes hacer con map
directamente, por ejemplo:
var allChecked = $('input[type=checkbox]:checked').map(function(){
return $(this).prop('id');
});
console.log(allChecked.get());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<input type="checkbox" id="one" checked value="option1">
<label for="one">Option1</label>
<input type="checkbox" id="two" value="option2">
<label for="two">Option2</label>
<input checked type="checkbox" id="three" value="option3">
<label for="three">Option3</label>
<input type="text" value="No es checkbox" />
</div>
Si necesitas hacer otras cosas en el bloque, entonces, creas un array y metes dentro los ids, por ejemplo:
var allChecked = [];
$('input[type=checkbox]:checked').each(function(){
/*Hacer más cosas aquí ...*/
allChecked.push($(this).prop('id'));
});
console.log(allChecked);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<input type="checkbox" id="one" checked value="option1">
<label for="one">Option1</label>
<input type="checkbox" id="two" value="option2">
<label for="two">Option2</label>
<input checked type="checkbox" id="three" value="option3">
<label for="three">Option3</label>
<input type="text" value="No es checkbox" />
</div>
Con Javascript puro, puedes hacer algo así:
var allChecked = [...document.querySelectorAll('input[type=checkbox]:checked')].map(e => e.id);
console.log(allChecked);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<input type="checkbox" id="one" checked value="option1">
<label for="one">Option1</label>
<input type="checkbox" id="two" value="option2">
<label for="two">Option2</label>
<input checked type="checkbox" id="three" value="option3">
<label for="three">Option3</label>
<input type="text" value="No es checkbox" />
</div>
La diferencia la marca el modo en que selecciones los elementos según el contexto de los mismos (el tipo, la clase, el contenedor, la posición, etc).