CriarWeb.com > Manuais > Workshop de Javascript

Deixarei aqui umas linhas de minha própria criação de um script Javascript que tive que fazer para comprovar o estado de elementos checkbox ou campos de verificação de formulários.

Trata-se de utilizar os típicos campos de verificação, porém com um limitador de grupo. Pode-se utilizar em loterias de vários resultados, nos futuros testes das auto-escolas com a possibilidade de marcar várias respostas, etc.

Temos uma série de grupos de checkbox e o que queremos fazer é nos assegurar que em cada grupo, de maneira independente, não se tenha marcado mais de um número definido de campos. Por exemplo, temos x grupos de 3 campos de verificação cada um. Se o usuário marca um campo de checkbox de um dos grupos não há problema algum. Se marca 2 campos tampouco há problemas, mas se tenta marcar os três checkbox do grupo Javascript não o permite e mostra uma mensagem de erro.

Podemos ver o exemplo em funcionamento para termos uma idéia mais concreta.

Formulário HTML

Vamos ter um formulário com, neste caso, dois grupos de campos de verificação.

<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, o nome de cada campo é distinto. E ademais temos uma função que se executa quando se clica sobre o checkbox (evento onclick), que será a encarregada de realizar a verificação.

Função para verificar checkbox por grupos

Vejamos o código Javascript que utilizamos para realizar a comprovação de que vários checkbox não possam estar clicados ao mesmo tempo no mesmo grupo.

Primeiro, definimos um par de variáveis globais, que utilizaremos para definir os campos máximos que podem estar marcados ao mesmo tempo, e outra para levar a conta dos campos que há marcados em cada grupo.

//Número máximo de campos marcados por cada fila
var maxi=2;

//O contador é um array de forma que cada posição do array é uma linha do formulário
var contador=new Array(0,0);

Agora a função que realizará a conta de campos e informará de uma possível falha na comprovação, se se clicam mais que os que se deve.

function validar(check,grupo) {
   //Comprovo se o campo está marcado
   if (check.checked==true){
       //está marcado, então aumento em um o contador do grupo
       contador[grupo]++;
       //comprovo se o contador chegou ao máximo permitido
       if (contador[grupo]>maxi) {
          //se tiver chegado ao máximo, mostro mensagem de erro
          alert('Não se pode escolher mais de '+maxi+' campos ao mesmo tempo.');
          //desmarco o campo, porque não se pode permitir marcar
          check.checked=false;
          //diminuo uma unidade ao contador de grupo, porque desmarquei um campo
          contador[grupo]--;
       }
   }else {
       //se o campo não estiver marcado, diminuo um ao contador de grupo
       contador[grupo]--;
   }
}

A função recebe dois parâmetros. Primeiro, o campo de formulário checkbox que se clicou. Logo, o número de grupo ao que pertence esse checkbox.

Necessita-se o checkbox para conhecer seu estado e para mudá-lo caso seja necessário. O grupo o utiliza para saber a que contador deve se referir, para saber o número de campos que há clicados nesse grupo.

A função está comentada para facilitar sua leitura e compreensão.

O exemplo em funcionamento pode-se executar em uma janela à parte.