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:
- 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)
- Um grupo de radiobuttons deve ter o mesmo atributo name
- O tipo é type="radio"
- 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
Kkkk curti o quiz de qual a melhor linguagem, acertei de primeira.
ResponderExcluir