Como Manipular Radio Buttons (Arrays e Laço FOR IN) em JavaScript

Neste tutorial de nosso Curso de JavaScript, online e grátis, vamos aprender como trabalhar melhor com os famosos radio buttons do HTML.

Vamos ver como verificar qual botão está checado, usando agora nossos conhecimentos de arrays e laço FOR IN.





Relembrando Radio Buttons

Os botões de rádio são aqueles que aparecem geralmente em formulários, do tipo checagem.
Eles tem uma particularidade: só pode apertar um por vez!


Abaixo, exemplo de 4 Radio Buttons, veja que você só consegue selecionar um por vez:

JavaScript
PHP
HTML
Python

O código-fonte dos radiobuttons acima é:
<input name="linguagens" type="radio" value="JavaScript" /> JavaScript<br />
<input name="linguagens" type="radio" value="PHP" /> PHP<br />
<input name="linguagens" type="radio" value="HTML" /> HTML<br />
<input name="linguagens" type="radio" value="Python" /> Python<br />

Quatro pontos:

  1. São inputs, ou seja, formulários que recebem algum valor do usuário (no caso, check ou uncheck, ou seja, checado ou não checado, selecionado ou não)
  2. Um grupo de radiobuttons deve ter o mesmo atributo name
  3. O tipo é type="radio"
  4. O atributo value é um valor qualquer (string, número...) que você deseja que aquele botão de radio tenha

Sabendo disso, vamos para o JavaScript.

Como Manipular Radio Buttons com JavaScript

Vamos exibir o seguinte conjunto de radiobuttons:
1
2
3
4
5


O código HTML para ele é:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <input name="mybuttons" type="radio" value="1" /> 1<br />
  <input name="mybuttons" type="radio" value="2" /> 2<br />
  <input name="mybuttons" type="radio" value="3" /> 3<br />
  <input name="mybuttons" type="radio" value="4" /> 4<br />
  <input name="mybuttons" type="radio" value="5" /> 5<br />
  <button onclick="checar()">Checar</button><br />
 </body>
</html>
Agora vamos fazer o JavaScript conversar com estes radiobuttons.
O que queremos é simples: ao clicar em um botão e clicar em Checar, abra uma janela de alert informando o que tem escrito no atributo value do botão que foi selecionado.

Veja o resultado:


1
2
3
4
5





Na nossa função checar() definimos uma variável bem especial, a botoes.
Com o código a seguir, ela vai pegar todo atributo de name="mybottons":
var botoes = document.getElementsByName("mybuttons");

A belezura desse código é que a variável botoes é um Array.
Isso mesmo, um vetor.

E o mais legal: cada elemento do vetor corresponde a um radiobutton!

No nosso exemplo, o elemento botoes[0] se refere ao primeiro botão, de valor 1.
O segundo elemento, botoes[1], se refere ao segundo botão, de valor 2, e assim sucessivamente.

E esses botões tem um atributo bem especial, o .checked
botoes[0].checked
botoes[1].checked
botoes[2].checked
botoes[3].checked
botoes[4].checked

Ele tem o valor TRUE se o botão for selecionado e tem o valor FALSE se o botão não estiver selecionado/checado.

Então, para saber que botão foi checado, usamos o código JavaScript abaixo:
function checar()
{
 var botoes = document.getElementsByName("mybuttons");

 for (var i = 0 in botoes) 
        if (botoes[i].checked)
            alert("Escolheu: " + botoes[i].value);
}

Ou seja, usamos um laço FOR IN para percorrer todos os elementos do array botoes.
Em cada um deles avaliamos o valor de checked.

O que der verdadeiro, vai no teste condicional IF e dizemos o valor dele!
Bem simples e interessante, não?

Exercício de JavaScript
Faça uma página na internet que exiba o seguinte script com os inputs e seus valores (teste):


Qual melhor linguagem ?
HTML
JavaScript
PHP
Python
C



Código está na apostila

Nenhum comentário:

Postar um comentário