Você está em: Home > Javascript/AJAX/DHTML > Visualizando artigo

Iniciando no Javascript: Controle de checkbox em Javascript

Autor/fonte: CriarWeb.com
E-mail/Url: http://www.criarweb.com/artigos/365.php

[ Indicar a um amigo ] [ Translate to english ] [ Imprimir ]

Os checkbox são umas caixas que permitem marca-las ou não para verificar alguma coisa em um formulário.

Os checkbox se conseguem com a etiqueta <INPUT type=checkbox>. Com o atributo NAME da etiqueta <INPUT> podemos lhe dar um nome para logo acessa-la com javascript. Com o atributo CHECKED indicamos que o campo deve aparecer checado por padrão.

Com Javascript, a partir da hierarquia de objetos do navegador, temos acesso ao checkbox, que depende do objeto form do formulário onde está incluído.

Propriedades de um checkbox

As propriedades que têm um checkbox são as seguintes:

checked

Informa sobre o estado do checkbox. Pode ser true ou false.

defaultChecked

Se está checada por padrão ou não.

value

O valor atual do checkbox.

Também têm as propriedades form, name, type como qualquer outro elemento de formulário.

Métodos do checkbox

Vejamos a lista dos métodos de um checkbox.

click()

É como se clicássemos sobre o checkbox, ou seja, muda o estado do checkbox.

blur()

Retira o foco da aplicação do checkbox.

focus()

Coloca o foco da aplicação no checkbox.

Para ilustrar o funcionamento das checkbox vamos ver uma página que tem um checkbox e três botões. Os dois primeiros para mostrar as propriedades checked e value e o terceiro para invocar a seu método click() com objetivo de simular um clique sobre o checkbox:

<html>
<head>
    <title>Exemplo Checkbox</title>
<script>
function alertaChecked(){
    alert(document.meuFormulario.meuCheck.checked)
}
function alertaValue(){
    alert(document.meuFormulario.meuCheck.value)
}
function metodoClick(){
    document.meuFormulario.meuCheck.click()
}
</script>
</head>

<body>
<form name="meuFormulario" action="mailto:colabore@criarweb.com" enctype="text/plain">
<input type="checkbox" name="meuCheck">
<br>
<br>
<input type="button" value="informa de sua propriedade checked" onclick="alertaChecked()">
<input type="button" value="informa de sua propriedade value" onclick="alertaValue()">
<br>
<br>
<input type="button" value="Simula um clique" onclick="metodoClick()">
</form>
</body>
</html>

Enviado por xKuRt em 22/11/2006 às 15:37

Avaliação

Esta publicação ainda não foi avaliada!

A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.

Comentários

Este artigo ainda não foi comentado ou o(s) comentário(s) que foi(ram) enviado(s) a ele ainda não foi(ram) publicado(s).

Envio de comentário: