Passar o mouse e aparecer ( Tutorial )

**IbackPwneÐ** · 18 de Abril 2010

Preview :

É necessário se cadastrar para acessar o conteúdo.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
3 <html xmls="http://ww.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
4 <head>
5 <title>Escondendo e mostrando checkboxes</title>
6 <meta http-equiv="Content-Type" content="text/html; charset=isso-8859-1" />
7 <script type="text/javaScript">
8 //cria uma função de nome formulario
9 function formulario()
10 {
11 /*cria uma variável checks que se transforma num array para armazenar as marcações input
12 dentro do documento HTML*/
13 var checks = document.getElementsByTagName("input");
14 //do i 0 até o tamanho de checks acrescentando 1 a variável i a cada loop; faça
15 for (var i=0;i<checks.length;i++)
16 {
17 //se o tipo input de checks for do chekbox; faça
18 if(checks[i].getAttribute("type") == "checkbox")
19 {
20 //se estiver marcado; faça
21 if(checks[i].checked)
22 {
23 //se o seu valor for compras; faça
24 if(checks[i].value == "compras")
25 {
26 //mostre o conteúdo existente no id produtos, colocando display como block
27 document.getElementById("produtos").style.display = "block";
28 }
29 }
30 //do contrário, ou seja, se não estiver marcado; faça
31 else{
32 //se o valor do input do tipo checkbox for compras
33 if(checks[i].value == "compras")
34 {
35 //esconda o conteúdo existente do id produtos, colocando displar como none
36 document.getElementById("produtos").style.display = "none";
37 /*da posição atual de tipo que estar armazenado na variável i até 3, incrementando
38 a variável ind em 1 a cada loop; faça*/
39 for (ind=i;ind<=i+3;ind++)
40 {
41 /*atribua o valor do documento de nome form, de nome tipo o seu valor
42 aos elementos subsequêntes na posição ind; com isso desmarca os 3 componentes
43 subsquêntes, no caso de algum estiver marcado.*/
44 checks[ind].checked = document.form.tipo.checked;
45 }
46 }
47 }
48 }
49 }
50 }
51 </script>
52 
53 <body onload="formulario()">
54 <form name="form">
55 
57 <input type="checkbox" value="compras" name="tipo" onClick="formulario();">Compras
58 
59 <span id="produtos" style="display: none">
60 <input type="checkbox" value="macarrão" name="produtos">Macarrão<br />
61 <input type="checkbox" value="sabão" name="produtos">Sabão<br />
62 <input type="checkbox" value="rapadura" name="produtos">Rapadura<br />
63 </span>
64 </form>
65 </body>
66 </html>

______________

Créditos :

Eu
Rodrigo

**Adeuk** · 24 de Abril 2010

Faltou dar uma explicadinha no code (;

**DragonBoss** · 23 de Maio 2010

da hora, soh vo tentar entender o code agora :D

**matheusguerra** · 23 de Maio 2010

Faltou dar uma explicadinha no code (;

como ele disse da uma explicada melhor, não pra mim, mas paras as pessoas que tem duvidas

Entrar

Quem está por aqui 0 membros estão online

Passar o mouse e aparecer ( Tutorial )

Posts Recomendados

IbackPwneÐ 0

Link para o comentário

Compartilhar em outros sites

Adeuk 1

Link para o comentário

Compartilhar em outros sites

DragonBoss 8

Link para o comentário

Compartilhar em outros sites

matheusguerra 3

Link para o comentário

Compartilhar em outros sites

Fóruns

Todas Atividades

Lojinha WC

Informação Importante