Validar número de checkbox marcados con Javascript
Un script en Javascript para validar casillas de verificaciónde formularios, para asegurarse que se han marcado un número máximo de checkbox.
21/2/07 - Aquí os dejo unas líneas de mi cosecha, en la creación de un script Javascript que he tenido que hacer para comprobar el estado de elementos checkbox o casillas de verificación de formularios.
Se trata de utilizar las típicas casillas de verificación pero con un limitador de grupo. Se puede utilizar en quinielas de varios resultados, en los futuros test de las autoescuelas con la posibilidad de marcar varias respuestas, etc.
Tenemos una serie de grupos de checkbox y lo que queremos hacer es asegurarnos que en cada grupo, de manera independiente, no se hayan marcado más de un número definido de casillas. Por ejemplo, tenemos x grupos de 3 casillas de verificación cada uno. Si el usuario marca una casilla de casillas de uno de los grupos no pasa nada. Si marca 2 casillas tampoco pasa nada, pero si intenta marcar los tres checkbox del grupo Javascript no lo permite y muestra un mensaje de error.
Podemos ver el ejemplo en marcha para hacernos una idea más concreta.
Formulario HTML
Vamos a tener un formulario con, en este caso, dos grupos de casillas de verificación.
<form action="" method="post" enctype="multipart/form-data" name="formulario" id="formulario">
<table width="76">
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox1,0)' name='checkbox1' value='checkbox1'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox2,0)' name='checkbox2' value='checkbox2'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox3,0)' name='checkbox3' value='checkbox3'></td>
<tr>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox4,1)' name='checkbox4' value='checkbox4'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox5,1)' name='checkbox5' value='checkbox5'></td>
<td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox6,1)' name='checkbox6' value='checkbox6'></td>
</tr>
</table>
</form>
Como podemos ver, el nombre de cada casilla es distinto. Y además tenemos una función que se ejecuta cuando se pulsa sobre el checkbox (evento onclick), que será la encargada de realizar la verificación.
Función para verificar checkbox por grupos
Veamos el código javascript que utilizamos para realizar la comprobación de que varios checkbox no puedan estar pulsados a la vez en el mismo grupo.
Primero definimos un par de variables globales, que utilizaremos para definir las casillas máximas que pueden estar marcadas al mismo tiempo, y otra para llevar la cuenta de las casillas que hay marcadas en cada grupo.
//Número máximo de casillas marcadas por cada fila
var maxi=2;
//El contador es un arrayo de forma que cada posición del array es una linea del formulario
var contador=new Array(0,0);
Ahora la función que realizará la cuenta de casillas e informará de un posible fallo en la comprobación, si se pulsan más que las que se debe.
function validar(check,grupo) {
//Compruebo si la casilla está marcada
if (check.checked==true){
//está marcada, entonces aumento en uno el contador del grupo
contador[grupo]++;
//compruebo si el contador ha llegado al máximo permitido
if (contador[grupo]>maxi) {
//si ha llegado al máximo, muestro mensaje de error
alert('No se pueden elegir más de '+maxi+' casillas a la vez.');
//desmarco la casilla, porque no se puede permitir marcar
check.checked=false;
//resto una unidad al contador de grupo, porque he desmarcado una casilla
contador[grupo]--;
}
}else {
//si la casilla no estaba marcada, resto uno al contador de grupo
contador[grupo]--;
}
}
La función recibe dos parámetros. Primero el campo de formulario checkbox que se ha pulsado. Luego el número de grupo al que pertenece ese checkbox.
El checkbox lo necesita para conocer su estado y para cambiarlo si fuera necesario. El grupo lo utiliza para saber a qué contador debe referirse, para saber el número de casillas que hay pulsadas en ese grupo.
La función está comentada para facilitar su lectura y comprensión.
El ejemplo en marcha se puede ejecutar en una venta aparte.
Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 2 comentarios (Añadir)
+ 2 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo |
|
Informe de Javier Bernal Lérida*
Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor.
* Para consultas técnicas utilizar la lista de correo.
|
Manuales relacionados con este artículo
Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en
Scripts en Javascript
Comentarios de los visitantes
|
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
|
| Se muestran 2 comentarios revisados |
Comentario de Gontzal
03/1/08
Buenas, he estado echandole un vistazo a su articulo y al comprobarlo en el ejemplo que tienen colgado con las 6 checkbox he podido observar que no funciona correctamente, ya que se pueden marcar hasta 4 casillas sin que el programa salte siempre y cuando no se marquen mas de dos por fila el programa no muestra ningun mensaje de error.
Comentario de Javier Bernal
08/1/08
El limitador esta programado para que funcione por filas. Es decir, como máximo solo podrás marcar dos checkbox de los tres correspondientes a cada fila. Claro que puedes marcar cuatro checkbox, dos y dos, independientes.
Imagina que quieres hacer una quiniela, y en cada partido puedes poner como máximo un doble.
| Comentarios sin revisar |
|
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
|
Se han encontrado 2 comentarios sin revisar
Ir arriba