Os objetos radio e checkbox

Propriedades, eventos e exemplos destes objetos contidos em formulários.

Por Eugenia Bahit


Publicado em: 22/9/08
Valorize este artigo:

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...

Deseja se inscrever ao nosso boletim de novidades?

SIM, quero me inscrever. Não, obrigado.


Selecione os temas de seu interesse:
Arte e Cultura
Ciência
Música

 

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...

Deseja se inscrever ao nosso boletim de novidades? SIM, quero me inscrever.

Selecione os temas de seu interesse:
Arte e Cultura
Ciência
Música

 





Comentários do artigo
Foram enviados 2 comentários ao artigo
2 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato