Esta podría ser una pregunta que ya se ha hecho, pero no pude encontrar la respuesta correcta. Así que lo pido solo para estar seguro.

Ahora, sé que jQuery proporciona un selector de atributos como :checked para obtener todas las casillas marcadas, pero necesitaría incluir esto en el selector mismo.

Pero, ¿hay alguna manera de hacer esto por separado del selector? Lo que quiero decir es, ¿qué pasa si almacena su selector en una variable?

Ejemplo

var checkboxSelector = $("input[name='myCheckboxes']");

Por lo tanto, esto tendría un uso general en el código general, por lo que no tendría que escribir el selector cada vez que lo necesite. Pero, ¿qué sucede si quisiera obtener la cantidad total de casillas marcadas con el atributo de nombre myCheckboxes ?

La forma obvia sería $("input[name='myCheckboxes']:checked").length, pero como estoy usando mi variable checkboxSelector no puedo incluir el selector :checked.

La forma en que sé obtener la cantidad total sería usar un .each() en mi selector y usar un contador para obtener la cantidad total, pero me preguntaba si había una manera más fácil de lograr esto.

Así que en lugar de hacer esto:

var checkboxSelector = $("input[name='myCheckboxes']");
/* Do some stuff with the variable*/

/* Time to get the total amount of checked checkboxes */
var count = 0;
checkboxSelector.each(function() {
      if($(this).is(":checked"))
           count++;
});

Esperaba que hubiera una manera de hacerlo así (o algo similar)

var count = checkboxSelector.is(":checked").length;

Ahora sé que esto no me daría la cantidad total, pero es solo un ejemplo. ¿Hay alguna forma de darme el recuento de todas las casillas marcadas almacenando mi selector en una variable? Preferiblemente al no usar un .each() para obtener el recuento.

¡Gracias de antemano!

EDITAR

Para ser claros, no puedo usar el siguiente selector:

var count = $("input[name='myCheckboxes']:checked").length;

Como mi selector está almacenado en una variable, tendría que usarlo así:

var checkboxSelector = $("input[name='myCheckboxes']");
/* At this point I cannot include the :checked attribute anymore */

Entonces $("input[name='myCheckboxes']:checked") no es una opción.

1
Jorrex 11 may. 2016 a las 11:20

4 respuestas

La mejor respuesta

Simplemente llame a .filter en su objeto jQuery pasando el selector que desea filtrar. Entonces, en este caso, pásele el selector :checked y devolverá una colección de solo elementos marcados

 var checkboxSelector = $("input[name='myCheckboxes']");

 /* some place else */
 var numChecked = checkboxSelector.filter(":checked").length;
 console.log(numChecked);

Demo

var checkboxSelector = $("input[name='myCheckboxes']");

$("button").click(function(){
  var numChecked = checkboxSelector.filter(":checked").length;
  $("#log").html(numChecked);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check 1: <input name="myCheckboxes" type="checkbox" value="3"></label><br>
<label>Check 2: <input name="myCheckboxes" type="checkbox" value="2"></label><br>
<label>Check 3: <input name="myCheckboxes" type="checkbox" value="1"></label><br>
<label>Check 4: <input name="myCheckboxes" type="checkbox" value="0"></label><br>
<button>Get Count</button><br>
<div id="log"></div>
4
Patrick Evans 11 may. 2016 a las 08:28

Si quieres usar tu variable para el selector, como dijiste:

var checkboxSelector = $("input[name='myCheckboxes']");

Puedes usar jQuery's filter de esta manera:

checkboxSelector.filter(':checked').length

Más información en la documentación oficial: http://api.jquery.com/filter/#filter- selector

3
Max 11 may. 2016 a las 08:31

Puedes hacerlo como seguir.

var count = $('input[name="myCheckboxes"]:checked').length

Actualización: use filter()

var count = $('input[name="myCheckboxes"]').filter(':checked').length
2
Ibrahim Khan 11 may. 2016 a las 08:30

Como ya tiene las casillas de verificación consultadas, puede filtrar solo las marcadas:

var checkedCount = checkboxSelector.filter(":checked").length
2
Alex Gyoshev 11 may. 2016 a las 08:28