CriarWeb.com > Manuais > Workshop de Javascript / Formulários e Javascript

O exercício que vamos relatar neste artigo é bastante típico de trabalho com formulários em Javascript. Trata-se de fazer um link para que se possa marcar todos os campos checkbox que houver em um formulário de uma só vez, ou seja, sem ter que clica-los um por um para marcar todos. Também faremos a função que permite desmarcar todos os campos checkbox do formulário de uma só vez.

O exercício é simples de entender, mas podemos vê-lo em uma página a parte para termos uma idéia exata de nossas intenções.

O formulário HTML

Temos um formulário criado com HTML que é onde estarão os checkboxes que serão marcados e desmarcados automaticamente. O formulário é muito simples. Vemos a seguir:

<form name="f1">
Nome: <input type="text" name="nome">
<br>
<input type="checkbox" name="ch1"> Opcao 1
<br>
<input type="checkbox" name="ch2"> Opcao 2
<br>
<input type="checkbox" name="ch3"> Opcao 3
<br>
<input type="checkbox" name="ch4"> Opcao 4
<br>
//Outro campo de formulario:
<select name=outro>
<option value="1">Selecao 1
<option value="2">Selecao 2
</select>
<br>
<input type="submit">
<br>
<br>
<a href="javascript:selecionar_todo()">Marcar todos</a> |
<a href="javascript:deselecionar_todo()">Marcar nenhum</a>
</form>

O único que devemos observar é que colocamos diversos tipos de elementos no formulário. Na verdade só vamos trabalhar com o estado dos checkbox, mas não incluímos outros elementos porque o habitual em um formulário é que tenham elementos de vários tipos.

No final do formulário temos dois links para marcar ou desmarcar todos os checkboxes de uma só vez. Estes links chamam a duas funções Javascript que veremos agora.

Funções de Javascript

function selecionar_tudo(){
   for (i=0;i<document.f1.elements.length;i++)
      if(document.f1.elements[i].type == "checkbox")
         document.f1.elements[i].checked=1
}

A função selecionar_tudo() realiza um percorrido por todos os elementos do formulário. Para fazer um percorrido por todos os campos utiliza-se o array "elements", que salva uma referência com cada elemento que houver dentro do formulário.

No percorrido comprova se o elemento atual é de tipo "checkbox" (lembrar que o array elements contem todos os elementos, mas somente desejamos operar com os que sejam checkbox) e nesse caso, simplesmente atualiza-se o atributo "checked" ao valor 1, com o qual o chekbox se marcará.

function deselecionar_tudo(){
   for (i=0;i<document.f1.elements.length;i++)
      if(document.f1.elements[i].type == "checkbox")
         document.f1.elements[i].checked=0
}

A função deselecionar_tudo() é quase igual que a anterior. Realiza um percorrido a todos os elementos e no caso que sejam checkbox, se fixa a zero o atributo "checked" para que a caixa de seleção fique desmarcada.

O exemplo não tem mais mistério. Pode-se ver em funcionamento em uma página a parte.