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.
