Controle de checkbox em javascript

Capítulo sobre o controle do elemento de formulário tipo checkbox ou caixa de verificação. Estudamos seus métodos e propriedades, com exemplos.

Os checkbox são umas caixas que permitem marca-las ou não para verificar alguma coisa em um formulário. Podemos ver uma caixa checkbox a seguir:

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>

Pode-se ver a página em funcionamento aqui.