JSOO - Trabalhar o checkbox com javascript

Publicado por Emiliano Eloi Silva Barbosa 21/07/2007

[ Hits: 6.441 ]

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

Conta o número de caracteres digitados e informa o restante

Jum Menu

Saudação durante o dia

isEmail

Prova


  

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