Neste POST irei desmonstrar como criar um “Marcar Todos” para checkBox’s, onde o desafio é criar uma aplicação onde se possa trabalhar com infimitos grupos de check box e um botão de marcar todos para cada checkBox, muito comum em formulários de cadastro e pesquisa. Desenvolvi esta função após buscar uma função que me atendesse e encontrei em todos o mesmo problema, eles selecionavam todos os elementos checkbox que estavam dentro do Form, logo não poderia ter mais de um grupo dentro do formulário, foi então que crie esta função que irei detalhar abaixo;

O primeiro passo é colocar as funções no da página.

[sourcecode language=”jscript”]
<script>

function actionToCheck(btn, chk){
if(btn.name==’btnCheckAll’){
checkAll(chk);
btn.name=’btnUnCheckAll’;
btn.value=’Desmarcar Todos’;
} else if(btn.name==’btnUnCheckAll’){
unCheckAll(chk);
btn.name=’btnCheckAll’;
btn.value=’Marcar Todos’;
} else {
checkAll(chk);
btn.name=’btnUnCheckAll’;
btn.value=’Desmarcar Todos’;
}
}

function checkAll(chk){
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}

function unCheckAll(chk){
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}

</script>
[/sourcecode]

Agora iremos criar nosso formulário dentro do corpo da página com os Grupos de CheckBox:

[sourcecode language=”html”]

<form id="frmCheckBox" name="frmCheckBox" method="post" action="">
<b>Qual sua área de interesse?</b><br />
<input type="checkbox" name="check[]" value="checkbox"/>Entreterimento<br />
<input type="checkbox" name="check[]" value="checkbox"/>Investimentos<br />
<input type="checkbox" name="check[]" value="checkbox"/>Marketing<br />
<input type="checkbox" name="check[]" value="checkbox"/>Tecnologia<br />
<input name="btnCheckAll" type="button" onclick="actionToCheck(this, document.getElementsByName(‘check[]’));" value="Marcar Todos" />

<br />
<br />
<br />

<b>Onde nos encontrou?</b><br />
<input type="checkbox" name="check2[]" value="checkbox2"/>Fóruns<br />
<input type="checkbox" name="check2[]" value="checkbox2"/>Google<br />
<input type="checkbox" name="check2[]" value="checkbox2"/>Grupos<br />
<input type="checkbox" name="check2[]" value="checkbox2"/>Twitter<br />
<input name="btnCheckAll" type="button" onclick="actionToCheck(this, document.getElementsByName(‘check2[]’));" value="Marcar Todos" />
</form>

[/sourcecode]

Agora é possivel criar infinitos grupos de checkbox dentro de um mesmo formulário com um botão selecionar todos para cada um dos grupos.

Clique aqui e veja o resultado…

Até o proximo POST.

One thought to “Marcar Todos CheckBox’s (CheckAll)”

  • Fábio

    Salvou minha vida. Obrigado.

    Responder

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.


Warning: Use of undefined constant XML - assumed 'XML' (this will throw an Error in a future version of PHP) in /home/rafaeltheodoro/www/wp-content/plugins/wp-syntaxhighlighter/wp-syntaxhighlighter.php on line 1048