JSOO - Trabalhar o checkbox com javascript

Publicado por Emiliano Eloi Silva Barbosa 21/07/2007

[ Hits: 6.303 ]

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

Uma simples validação de formulário

Formulário de Login no GOOGLE APPS - MAIL

Saudação durante o dia

sadfasdfasdf

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


  

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