JSOO - Trabalhar o checkbox com javascript

Publicado por Emiliano Eloi Silva Barbosa 21/07/2007

[ Hits: 6.403 ]

Homepage: http://emilianoeloi.com.br

Download checkbox.html




Javascript para trabalhar com checkbox. Selecionar todos verificar propriedades.

  



Esconder código-fonte

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>CHECKBOX</title>
        <meta http-equiv="pragma" content="no-cache" />
        <meta name="description" content="checkbox" />
        <meta name="keywords" content="checkbox" />
        <meta name="robots" content="All" />
        <meta name="author" content="Emiliano ESB" />
        <meta name="language" content="pt-br" />
        <link href="folha1.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            Checkbox = function(){}
            with({cb: Checkbox.prototype}){
                cb.formulario = {};
                cb.formularioCarregado = false;
                cb.carregarFormulario = function(f){
                    if(!cb.formularioCarregado){
                        cb.formulario = f;
                        cb.formularioCarregado = true;
                    }
                }
                cb.inner = function(s,v){
                    document.getElementById(s).innerHTML = v;
                }
                cb.mostraChecked = function(c){
                    return c.checked;
                }
                cb.mostraValue = function(c){
                    return c.value;
                }
                cb.click = function(c){
                    i = c.name.substring(5,6);
                    cb.inner('chk'+i, cb.mostraChecked(c) );
                    cb.inner('val'+i, cb.mostraValue(c) );
                }
                cb.marcar = function(v){
                    for (i=0;i<cb.formulario.elements.length;i++)
                        if(cb.formulario.elements[i].type == "checkbox"){
                            cb.formulario.elements[i].checked=v; 
                            cb.click(cb.formulario.elements[i])
                        }
                }
                cb.marcarTodos = function(f){
                    cb.carregarFormulario(f);
                    cb.marcar(true);
                }
                cb.desmarcarTodos = function(f){
                    cb.carregarFormulario(f);
                    cb.marcar(false);
                }
            }
            cb = new Checkbox();
       </script>
    </head>
    <body>
        <div id="cobody">
            <div id="head">
                <h1>Checkbox</h1>
            </div>
            <div id="content">
                <form action="#" id="cb">
                <fieldset>
                    <legend>checkbox</legend>
                    <table>
                        <caption>Lista<br /><a href="JavaScript://Selecionar todos" onclick="cb.marcarTodos( document.getElementById('cb') );">Todos</a>|<a href="JavaScript://Selecionar nenhum" onclick="cb.desmarcarTodos( document.getElementById('cb') );">Nenhum</a></caption>
                        <thead>
                            <tr>
                                <th>cb</th>
                                <th>valor</th>
                                <th>checked</th>
                                <th>value</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th colspan="5">Checkboxes</th>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <th><input type="checkbox" id="check1" name="check1" onclick="cb.click(this);" /></th>
                                <td>Checkbox 1</td>
                                <td><span id="chk1">default</span></td>
                                <td><span id="val1">default</span></td>
                            </tr>
                            <tr>
                                <th><input type="checkbox" id="check2" name="check2" onclick="cb.click(this);"/></th>
                                <td>Checkbox 2</td>
                                <td><span id="chk2">default</span></td>
                                <td><span id="val2">default</span></td>
                            </tr>
                            <tr>
                                <th><input type="checkbox" id="check3" name="check3" onclick="cb.click(this);"/></th>
                                <td>Checkbox 3</td>
                                <td><span id="chk3">default</span></td>
                                <td><span id="val3">default</span></td>
                            </tr>
                            <tr>
                                <th><input type="checkbox" id="check4" name="check4" onclick="cb.click(this);"/></th>
                                <td>Checkbox 4</td>
                                <td><span id="chk4">default</span></td>
                                <td><span id="val4">default</span></td>
                            </tr>
                        </tbody>
                    </table>
                </fieldset>
                </form>
            </div>
        </div>
    </body>
</html>

Scripts recomendados

Função Javascript simples para validação de CPFs

Máscara de celular com 8 ou 9 dígitos

Validação de formulário

Validação de CPF e CNPJ em única Função

Validar extensão de arquivo


  

Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts