2009-12-24 13 views
20

¿cómo puedo calcular el número de casillas de verificación que un usuario ha marcado usando jquery?calcule el número de casillas de verificación html marcadas con jquery

lo que quiero hacer es limitar el número de marcas de verificación en un formulario a 10, por ejemplo, y cuando un usuario supera este rango, muestra un mensaje de advertencia.

+0

posible duplicado de [Cómo obtener un recuento de todas las casillas marcadas en una página] (http: // stackove rflow.com/questions/872296/how-to-get-a-count-of-all-checked-checkboxes-on-a-page) – gcochard

Respuesta

60

Existen múltiples métodos para hacer que:

Método 1:

alert($('.checkbox_class_here:checked').size()); 

Método 2:

alert($('input[name=checkbox_name]').attr('checked')); 

Método: 3

alert($(":checkbox:checked").length); 
+1

Buena respuesta, pero ¿no debería usar .checkbox_id_here en lugar de #checkbox_id_here? Si usa #checkbox_id_here, size() siempre será 1, lo que no servirá de nada porque solo puede haber una ID única. Tiene sentido hacer referencia a las clases en su lugar, donde puede haber varias casillas de verificación –

+0

@Bug Magnet: Gracias por señalar el error tipográfico, reparado :) – Sarfraz

+1

'alerta ($ ('. Emparejamiento-cbk: comprobado'). Tamaño()); 'no funcionó pero' alert ($ ('. emparejamiento-cbk: checked'). size()); 'funcionó debido a la razón mencionada anteriormente por @James Wiseman – Amitabh

17

Esto debería funcionar:

alert($("input:checkbox:checked").length); 
+0

$ ("input: checkbox: checked"). Length; con un espacio entre checkbox y: checked no funcionará, me estaba pasando a mí. –

+1

Eso es porque estaría buscando descendends de 'input: checkbox' que fueron' checked', no para 'input: checkbox' que ellos mismos están marcados. El espacio estipula una relación ancestro/descendiente. –

+0

Gracias por la entrada que realmente no sabía eso. –

2

Si ninguno de los métodos anteriores de trabajo, es probable que no han importado jQuery todavía. Para importar jQuery, pegue este código en el <head> de su HTML.

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

en realidad tenía el mismo problema al crear una página de pedidos de productos, y yo quería que contar el número de productos en el carro en la página de confirmación del pedido. Me referí a esta publicación e intenté con todos los métodos. Luego descubrí que no importé jQuery, por lo que el $(':checkbox:checked') no funcionó.

0

usted debe utilizar

alert($("input:checkbox:checked").length); 

o

alert($(".checkbox-class:checked").length); 

si tiene más formas en una página

.size() (método del número 1 en respuesta aceptada actual) es obsoleto desde jQuery 1.8

Cuestiones relacionadas