Controle de botões de radio em Javascript

Explicação sobre o manejo de radio buttons em Javascript. Lista de métodos e propriedades junto com algum exemplo de seu funcionamento.

O botão de radio (ou radio button em inglês) é um elemento de formulário que permite selecionar uma opção e somente uma, sobre um conjunto de possibilidades. Pode-se ver a seguir:

Nota: Na parte acima podemos ver três radio buttons ao invés de um só. Colocam-se três botões porque assim podemos examinar seu funcionamento ao formar parte de um grupo. Vejamos que ao selecionar uma opção se desmarca a opção que estiver marcada antes.

Consegue-se com a etiqueta <INPUT type=radio>. Com o atributo NAME da etiqueta <INPUT> damos um nome para agrupar os radio button e que somente se possa escolher uma opção entre várias. Com o atributo value indicamos o valor de cada um dos radio buttons. O atributo checked nos serve para indicar qual dos radio butons tem que estar selecionado por padrão.

Referencia: Explicamos com detalhe a criação de botões de radio em nosso manual de HTML, no capítulo Outros elementos de formulários.

Quando em uma página temos um conjunto de botões de radio cria-se um objeto radio por cada um dos botões. Os objetos radio dependem do formulário e pode-se acessá-los pelo array de elements, entretanto também cria-se um array com os botões de radio. Este array depende do formulário e tem o mesmo nome que os botões de radio.

Propriedades do objeto radio

Vejamos uma lista das propriedades deste elemento.

checked
Indica se está checado ou não um botão de radio.

defaultChecked
Seu estado padrão.

value
O valor do campo de radio, atribuído pela propriedade value do radio.

Length (como propriedade do array de radios)
O número de botões de radio que formam parte no grupo. Acessível no vetor de radios.

Métodos do objeto radio

São os mesmos que tinha o objeto checkbox.

Exemplo de utilização

Vejamos com um exemplo o método de trabalho com os radio buttons no qual vamos colocar vários deles e cada um terá associado uma cor. Também haverá um botão e ao clicá-lo mudaremos a cor de fundo da tela a cor que esteja selecionada no conjunto de botões de radio.

Vamos ver a página inteira e em seguida comentamos.

<html>
<head>
    <title>Exemplo Radio Button</title>
<script>
function mudaCor(){
    var i
    for (i=0;i<document.fcores.colorin.length;i++){
       if (document.fcores.colorin[i].checked)
          break;
    }
    document.bgColor = document.fcores.colorin[i].value
}
</script>
</head>

<body>
<form name=fcolores>
<input type="Radio" name="colorin" value="ffffff" checked> Branco
<br>
<input type="Radio" name="colorin" value="ff0000"> Vermelho
<br>
<input type="Radio" name="colorin" value="00ff00"> Verde
<br>
<input type="Radio" name="colorin" value="0000ff"> Azul
<br>
<input type="Radio" name="colorin" value="ffff00"> Amarelo
<br>
<input type="Radio" name="colorin" value="ff00ff"> Lilás
<br>
<input type="Radio" name="colorin" value="000000"> Preto
<br>
<br>
<input type="Button" name="" value="Muda Cor" onclick="mudaCor()">
</form>
</body>
</html>

Primeiro, podemos observar no formulário e na lista de botões de radio. Todos se chamam "colorin", portanto estão associados em um mesmo grupo. Além disso, vemos que o atributo value de cada botão muda. Também vemos um botão abaixo de tudo.

Com esta estrutura de formulário teremos um array de elements de 9 elementos, os 8 botões de radio e o botão debaixo.

Ademais, teremos um array de botões de radio que se chamará colorin e depende do formulário, acessível desta maneira:

document.form.colorin

Este array tem em cada posição um dos botões de radio. Assim, na posição 0 está o botão de cor branca, na posição 1 o de cor vermelha... Para acessar a estes botões de radio fazemos pelo seu índice.

document.fcores.colorin[0]

Se quisermos acessar por exemplo à propriedade value do último botão de radio escrevemos o seguinte:

document.fcores.colorin[7].value

A propriedade length do array de radios nos indica o número de botões de radio que fazem parte do grupo.

document.fcores.colorin.length

Neste caso, a propriedade length valerá 8.

Com estas notas poderemos entender mais ou menos bem a função que se encarrega de encontrar o radio button selecionado e mudar a cor de fundo da página.

Define-se uma variável na qual introduziremos o índice do radio button que temos selecionado. Para isso, vamos percorrendo o array de botões de radio até encontrarmos o que tem sua propriedade checked a true. Nesse momento, saímos do loop, com o qual a variável i armazena o índice do botão de radio selecionado. Na última linha mudamos a cor de fundo pelo que que estiver selecionado no atributo value do radio button.

Podemos ver esse exemplo em funcionamento.