JSOO - Trabalhar o checkbox com javascript

Publicado por Emiliano Eloi Silva Barbosa 21/07/2007

[ Hits: 6.304 ]

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

Validação de formulário

Selecionar todos checkbox

Validação de Data - Fácil

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

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