Você está na página 1de 8

Rotina: Contador de Checkbox e Radio

Grupo 7: Kevin & Samanta Talarico

Contador de
Checkbox

Contador de
Radio

Objetivo: identificar quantas


opes foram selecionadas

Objetivo: identificar se alguma


opo foi selecionada

CDIGO BASE: Checkbox


<html>

Define valor inicial e


coloca como mximo
o valor do tamanho
de campos
selecionados

for(i = 0; i < maximo; i++)


if (form.campo1[i].checked == true){
total +=1;
}

<form name="exemplo" method="GET"


action="pagina.html" target="_blank">
<input type="checkbox" name="
campo1" value="1">Opo 1<br>
<input type="checkbox" name="
campo1" value="2">Opo 2<br>
<input type="checkbox" name="
campo1" value="3">Opo 3<br>
<input type="checkbox" name="
campo1" value="4">Opo 4<br>
<input type="button" value="Contar
campos" onClick="ContarCampos(this.form)">
</form>

alert("Foram selecionados " + total + "

</html>

<head>
<meta charset="UTF-8">
</head>

<script language="javascript">
function ContarCampos(form){
var total = 0;
var maximo = form.campo1.length;
Cria um lao
para contar os
campos
selecionados

opes")
}
</script>

Faz um alerta
mostrando o
resultado

Ao clicar, chama a rotina


criada anteriormente
enviando o formulrio onde
o boto est inserido.

Exemplo de Uso:
Um Checkbox com 6 itens selecionveis, representando jogos que voc pode ter jogado. A
rotina ir contar quantos jogos voc selecionou. Ao clicar em Contar campos um alerta aparece
na tela, informando-o do resultado. Veja:
1

CDIGO BASE: Contador


<html>
<head>
<meta charset="UTF-8">
</head>

Cria booleana para


cada uma das
opes do
formulrio.

<script language="javascript">
function limitarSeleco(campo,form){
a = campo.form.campo1[0].checked;
Contador
b = campo.form.campo1[1].checked;
verifica
c = campo.form.campo1[2].checked;
quantas foram
selecionadas

contador = (a ? 1 : 0) + (b ? 1 : 0) + (c ? 1 : 0);
if (contador > 2)
{
alert("S pode selecionar 2 opes");
campo.checked = false;
}
}
</script>
Em caso de selees
excedentes,
desmarca a ltima

<form name="exemplo1" method="GET" action="


pagina.html" target="_blank">
Por favor, selecione 2 opes como
mximo:<br>
<input type="checkbox" name="campo1"
value="Opcao 1" onClick="limitarSeleco(this,this.
form)">Opo 1<br>
<input type="checkbox" name="campo1"
value="Opcao 2" onClick="limitarSeleco(this,this.
form)">Opo 2<br>
<input type="checkbox" name="campo1"
value="Opcao 3" onClick="limitarSeleco(this,this.
form)">Opo 3<br>
<input type="submit" value="Enviar">
</form>
</html>

Chama a funo
sempre que
selecionar uma
opo

Exemplo de Uso:
Opes de categorias onde seu jogo pode ser classificado:

CDIGO BASE: Radio


<html>
<head>
<meta charset="UTF-8">
</head>

No muito diferente
do cdigo base do
Checkbox

<script language="javascript">
function ChecarRadio(form){
var total = false;
var maximo = form.campo1.length;
Cria um lao
para encontrar
um campo
selecionado

for(i = 0; i < maximo; i++)


if (form.campo1[i].checked == true){
total = true;
}

(!total) ? alert("Voc no selecionou


nenhuma opo") : alert("Obrigado por selecionar uma opo!");;
}
</script>

Alerta se voc fez ou


no uma seleo

<form name="exemplo" method="GET" action="


pagina.html" target="_blank">
<input type="Radio" name="campo1"
value="opt1" > Opo 1 <br>
<input type="Radio" name="campo1"
value="opt2" > Opo 2 <br><br>
<input type="button" value="Checar"
onclick="ChecarRadio(this.form)">
</form>

</html>

Ao clicar, chama a rotina


criada anteriormente
enviando o formulrio onde
o boto est inserido.

Exemplo de Uso:
Um Radio com 2 itens selecionveis, representando qual o sexo do jogador. A rotina ir
verificar se algum campo foi selecionado, exibindo um alerta informando o usurio do ocorrido.
Veja:
1