Código de JQuery - Contar los checkbox seleccionados y poner un limite

Imágen de perfil

Contar los checkbox seleccionados y poner un limitegráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 20 de Agosto del 2016 por xve (Creado el 19 de Agosto del 2016)
936 visualizaciones desde el 19 de Agosto del 2016. Una media de 63 por semana
Este código es un ejemplo para ver como limitar el numero de checkbox seleccionados en un formulario.
Permite especificar el número máximo de checkbox que se permiten marcar, no dejando marcar mas de lo especificado.

Requerimientos

jquery

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 28 de Agosto del 2016 (Creado el 19 de Agosto del 2016)gráfica de visualizaciones de la versión: Versión 1
937 visualizaciones desde el 19 de Agosto del 2016. Una media de 63 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<style>
	</style>
</head>
<body>
	<form>
		<div>
			Indica la cantidad que puedes seleccinar: <input type="text" id="cantidad" value="0">
		</div>
 
		<input type="checkbox"> A
		<input type="checkbox"> B
		<input type="checkbox"> C
		<input type="checkbox"> D
		<input type="checkbox"> E
		<input type="checkbox"> F
		<input type="checkbox"> G
		<input type="checkbox"> H
		<input type="checkbox"> I
		<input type="checkbox"> J
		<input type="checkbox"> K
 
		<div>Seleccionados: <span id="seleccionados">0</span></div>
	</form>
</body>
</html>
 
<script>
$(document).ready(function(){
 
	// Evento que se ejecuta al soltar una tecla en el input
	$("#cantidad").keydown(function(){
		$("input[type=checkbox]").prop('checked', false);
		$("#seleccionados").html("0");
	});
 
	// Evento que se ejecuta al pulsar en un checkbox
	$("input[type=checkbox]").change(function(){
 
		// Cogemos el elemento actual
		var elemento=this;
		var contador=0;
 
		// Recorremos todos los checkbox para contar los que estan seleccionados
		$("input[type=checkbox]").each(function(){
			if($(this).is(":checked"))
				contador++;
		});
 
		var cantidadMaxima=parseInt($("#cantidad").val()) || 0;
 
		// Comprovamos si supera la cantidad máxima indicada
		if(contador>cantidadMaxima)
		{
			alert("Has seleccionado mas checkbox que los indicados");
 
			// Desmarcamos el ultimo elemento
			$(elemento).prop('checked', false);
			contador--;
		}
 
		$("#seleccionados").html(contador);
	});
});
</script>



Comentarios sobre la versión: Versión 1 (1)

Imágen de perfil
kip
19 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3637