Por Eugenia Bahit
12.1 Propriedades dos objetos
| propriedade | descrição |
|
name |
É o nome que identifica a um checkbox a um grupo de radio buttons. Para que estes últimos conservem a capacidade de seleção única, devem ter todos o mesmo nome. |
| value |
É um valor associado a cada checkbox ou radio.
No caso dos checkbox é útil atribuir a um grupo destes com o mesmo name distintos valores. Porém, se quiser acessar às propriedades de cada checkbox separadamente mediante JavaScript, é melhor utilizar um name diferente para cada checkbox, já que do contrário (se todos tiverem o mesmo name) a propriedade value resultaria pouco útil.
No caso dos radio buttons é uma propriedade necessária sempre ao ter todos o mesmo name, embora para seu acesso mediante JavaScript, esta propriedade não é muito útil. |
| disabled |
bloqueia o checkbox ou radio. Portanto "Não é enviado no formulário" e "age como se não existisse". |
| checked |
marca ou comprova se está marcado um checkbox ou um radio. É uma propriedade booleana (que só admite verdadeiro ou falso) na qual seu valor será "true" (verdadeiro) se o objeto estiver marcado e "false" (falso) no caso em que não esteja. |
| length |
é a quantidade de radio buttons que existe em um grupo determinado com o mesmo name. |
| index |
array que contém todos os radio buttons que existe em um
grupo com o mesmo nome. Para um grupo de 5 radio buttons
com mesmo nome e diferente valor cada um, para nos referirmos ao quarto deles se deve usar a sintaxe:
formulario.nome_radio[3] |
12.2 Principais eventos
| evento | descrição |
|
onFocus |
Permite realizar uma ação ao colocar o foco no objeto. |
| onBlur | Permite realizar uma ação quando o foco já não se encontra no objeto. |
| onClick | Permite realizar uma ação quando se clica sobre o objeto. |
| onChange | Evento que se produz ao marcar/desmarcar um checkbox ou um radio button. |
12.3 Sintaxe básica
Para um grupo de radio buttons (mesmo nome distinto valor)
<input type="radio" name="color" value="vermelho">
<input type="radio" name="color" value="verde">
Para um grupo de checkbox (mesmo nome distinto valor)
<input type="checkbox" name="colores" value="vermelho">
<input type="checkbox" name="cores" value="verde">
12.4 Exemplos de aplicação I: Trabalhando com a propriedade disabled
Exemplo #1
Neste caso se habilitarão ou desabilitarão os checkbox dependendo da opção que selecione o usuário de um grupo de dois radio buttons.
O Script...
<script language="javascript">
function habilita(form)
{
form.interesses[0].disabled = false;
form.interesses[1].disabled = false;
form.interesses[2].disabled = false;
}
function desabilita(form)
{
form.interesses[0].disabled = true;
form.interesses[1].disabled = true;
form.interesses[2].disabled = true;
}
</script>
O Formulário...
<form name="exemplo1">
Deseja se inscrever ao nosso boletim de novidades? <br>
<input type="radio" name="boletin" value="si" checked onClick="habilita(this.form)"> SIM, quero me inscrever.
<input type="radio" name="boletim" value="no" onClick="desabilita(this.form)"> Não, obrigado.
<br><br>
Selecione os temas de seu interesse:<br>
<input type="checkbox" name="interesses" value="Arte e Cultura"> Arte e Cultura<br>
<input type="checkbox" name="intereses" value="Ciência">Ciência<br>
<input type="checkbox" name="interesses" value="Música">Música<br>
</form>
Os resultados...
Exemplo #2
Neste caso se habilitarão ou desabilitarão os checkbox dependendo do valor da propriedade checked de outro checkbox.
O Script...
<script language="javascript">
function habilitaDesabilita(form)
{
if (form.boletim.checked == true)
{
form.interesses[0].disabled = false;
form.interesses[1].disabled = false;
form.interesses[2].disabled = false;
}
if (form.boletim.checked == false)
{
form.interesses[0].disabled = true;
form.interesses[1].disabled = true;
form.interesses[2].disabled = true;
}
}
</script>
O Formulário...
<form name="exemplo2">
Deseja se inscrever ao nosso boletim de novidades? <input type="checkbox" name="boletim" value="ON" checked onClick="habilitaDesabilita(this.form)"> SIM, quero me inscrever.
<br><br>
Selecione os temas de seu interesse:<br>
<input type="checkbox" name="interesses" value="Arte e Cultura"> Arte e Cultura<br>
<input type="checkbox" name="interesses" value="Ciência">Ciência<br>
<input type="checkbox" name="interesses" value="Música">Música<br>
</form>
Os resultados...
