Validar número de checkbox marcados con Javascript

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 .

Usuarios que han visto este tema también han visto...

- Euroconversor en Javascript
- Iluminar Tabla
- Cómo colocar los códigos Javascript
- Funciones en Javascript
- Crear iframes dinámicamente mediante Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento