JSOO - Trabalhar o checkbox com javascript

Publicado por Emiliano Eloi Silva Barbosa 21/07/2007

[ Hits: 6.338 ]

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

Clona / Copia dados digitados em um campo exibe no outro

Validador de IP em JavaScrip com Expressão Regular

Saudação durante o dia

Seleccionar tudo

Ordenação de Registros em uma Table


  

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