Avatar

Controlar Duas Caixas Checkbox

Neste tópico vou mostrar controle de grupos de checkbox

Escrito por RobsonUgoStoso em JavaScript e Ajax. Data: 04/07/2008

Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original

Ver tópico original no fórum.

Olá galera,

Eu vou apresentar neste tópico uma das várias maneiras de controlar grupos de checkbox dentro de uma página, eu uso muito com Ajax quando eu chamo numa página em divs separadas outras duas páginas com grupos de checkbox diferentes, ja que ao apresentar uma página dentro de uma div ela passa a fazer parte da página pai.

Primeiro vamos ao assunto.

Monta uma página chamada controle.htm
CODE
<html>
     <head>
         <title>Documento sem t&iacute;tulo</title>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     </head>
    
     <body>
         <form action="#" id="frmRelatorioDinamico" method="post" name="frmRelatorioDinamico">
             <table align="left" border="0" cellpadding="2" cellspacing="0">
                 <tr><td align="center">Marque a vontade.</td></tr>
                 <tr><td><div align="left" id="divDancas">
                             <input type="checkbox" name="SelTodos" id="SelTodos" value="" onclick="MarcaTudo('chkDancas_');" /><b>Marcar Tudo</b>

                             <input type="checkbox" name="chkDancas_1" id="chkDancas_1" value="dança 1" />Tango

                             <input type="checkbox" name="chkDancas_2" id="chkDancas_2" value="dança 2" />Jazz

                             <input type="checkbox" name="chkDancas_3" id="chkDancas_3" value="dança 3" />Samba

                         </div>
                     </td>
                 </tr>
                 <tr><td><div align="left" id="divFestas">
                             <input type="checkbox" name="SelTodos" id="SelTodos" value="" onclick="MarcaTudo('chkFestas_');" /><b>Marcar Tudo</b>

                             <input type="checkbox" name="chkFestas_1" id="chkFestas_1" value="Festa 1" />October

                             <input type="checkbox" name="chkFestas_2" id="chkFestas_2" value="Festa 2" />Festa do Cabide

                             <input type="checkbox" name="chkFestas_3" id="chkFestas_3" value="Festa 3" />Festa Junina

                         </div>
                     </td>
                 </tr>
             </table>
         </form>
     </body>
</html>

Agora vamos criar uma função chamada MarcaTudo em javascript que será a responsável por marcar todos os checkbox do grupo informado.
CODE
<script type="text/javascript">
     function MarcaTudo(Objeto)
     {    var checks = document.getElementsByTagName("input");
         var grupo;
        
         for (var i=0; i<checks.length; i++) {
             grupo =  checks[i].id;
             if (grupo.indexOf(Objeto) >= 0) {
                 if (!checks[i].checked) {
                     checks[i].checked = true;
                 }
                 else {
                     checks[i].checked = false;
                 }
             }
         }
     }
</script>

Eu passo para a função i id do grupo que eu quero controlar e depois eu pego atravéz da TagName todos os inputs da página.

Fazendo um loop na lista encontrada eu verifico e gravo os ids de capa input.

Com a função indexOf eu verifico na variável grupo se o nome que eu passei para a função MarcaTudo faz parte do id dos elementos da lista de inputs.

Se o elemento fizer então eu vereifico se ele está marcado ou não e faço a marcação.

O código final deve ficar assim:
CODE
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>Documento sem t&iacute;tulo</title>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
         <script type="text/javascript">
             function MarcaTudo(Objeto)
             {    var checks = document.getElementsByTagName("input");
                 var grupo;
                
                 for (var i=0; i<checks.length; i++) {
                     grupo =  checks[i].id;
                     if (grupo.indexOf(Objeto) >= 0) {
                         if (!checks[i].checked) {
                             checks[i].checked = true;
                         }
                         else {
                             checks[i].checked = false;
                         }
                     }
                 }
             }
         </script>
     </head>
    
     <body>
         <form action="#" id="frmRelatorioDinamico" method="post" name="frmRelatorioDinamico">
             <table align="left" border="0" cellpadding="2" cellspacing="0">
                 <tr><td align="center">Marque a vontade.</td></tr>
                 <tr><td><div align="left" id="divDancas"><b>Danças:</b>

                             <input type="checkbox" name="SelTodos" id="SelTodos" value="" onclick="MarcaTudo('chkDancas_');" /><b>Marcar Tudo</b>

                             <input type="checkbox" name="chkDancas_1" id="chkDancas_1" value="dança 1" />Tango

                             <input type="checkbox" name="chkDancas_2" id="chkDancas_2" value="dança 2" />Jazz

                             <input type="checkbox" name="chkDancas_3" id="chkDancas_3" value="dança 3" />Samba

                         </div>
                     </td>
                 </tr>
                 <tr><td><div align="left" id="divFestas"><b>Festas:</b>

                             <input type="checkbox" name="SelTodos" id="SelTodos" value="" onclick="MarcaTudo('chkFestas_');" /><b>Marcar Tudo</b>

                             <input type="checkbox" name="chkFestas_1" id="chkFestas_1" value="Festa 1" />October

                             <input type="checkbox" name="chkFestas_2" id="chkFestas_2" value="Festa 2" />Festa do Cabide

                             <input type="checkbox" name="chkFestas_3" id="chkFestas_3" value="Festa 3" />Festa Junina

                         </div>
                     </td>
                 </tr>
             </table>
         </form>
     </body>
</html>

É isso aí pessoal, qualquer coisa postem.

Um grande abraço.

Você gostou? Comente no fórum!

Mais recentes em JavaScript e Ajax

Como bloquear imagens do site
Por Lucasbr - E ai galera, blz? - se que é impossivel proteger realmente...
Validador de formulário
Por carlosmborgesjr - Boa tarde, - cara, seu validador ficou muito bom, muito...
[prototype]classe de utilidades - continuação
Por Carutcho - Continuação da classe, método setattrib...
[prototype]classe de utilidades
Por Carutcho - Criando classe de utilidades aos poucos....
O que permite várias requisições
Por VBRSOFT - Olá micox, - parabéns, é um excelente script! -...

Ver mais Artigos de JavaScript e Ajax.

Ver e retirar outras dúvidas no fórum Webly.

Alguns Direitos Reservados | RSS | O Fórum

Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com