Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

angus

[Resolvido] Tabela com Radio Button

Por , em Javascript

Recommended Posts

angus    0

angus
Postado

Boa tarde,

 

Como faço para criar uma nova div em java script ao selecionar um radio button?

 

tipo assim:

 

Seleciono umas das opções e ai ele muda a cor da div que foi selecionada para verde e depois aparecer uma nova div com outra pergunta com dois radios button, selecionada ele tambem fica verde e cria uma nova div cinza... assim por diante.

 

como faço isso em java script?

Obrigado!

 

Parecido com a imagem abaixo.

 

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

M4n0w4r    0

M4n0w4r
Postado

Para fazer esse efeito é simples, é so usar o evento "onclick" que a mágica acontece :D

 

Brincadeiras a parte, é preciso tentar fazer por você mesmo, não é todo dia que alguem vai ter a disposição de fazer um script pronto para algo tão complicado.

 

O script abaixo vai te ajudar, mas se quiser algo a mais e melhor você vai ter que ir atrás, pelo menos da minha parte :P

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<script type = "text/javascript">
			Element.prototype.perguntasRadio = function (perguntas, comecaEsconder) {
				var conteudo1, conteudo2, este, este_uls, label1, label2, li1, li2, maisUm, radio1, radio2, ul;
				var doisParentesAtras, parente, target, tresParentesAtras, tresParentesAtras_divs;
				
				var contaPerguntas = perguntas.length;
				
				este = this;
				
				for (var i = 0; i < contaPerguntas; i ++) {
					maisUm = i + 1;
					
					conteudo1 = document.createElement ("div");
					
					conteudo2 = document.createElement ("div");
					
					label1 = document.createElement ("label");
						label1.style.color = "rgb(77, 73, 72)";
						label1.style.marginRight = "30px";
					
					label2 = document.createElement ("label");
						label2.style.color = "rgb(77, 73, 72)";
					
					li1 = document.createElement ("li");
						li1.innerHTML = maisUm + " de " + contaPerguntas;
						li1.style.backgroundColor = "rgb(77, 73, 72)";
						li1.style.color = "white";
						li1.style.display = "inline-block";
						li1.style.margin = "2px";
						li1.style.padding = "25px";
					
					li2 = document.createElement ("li");
						li2.style.backgroundColor = "rgb(239, 237, 238)";
						li2.style.display = "inline-block";
						li2.style.margin = "2px";
						li2.style.padding = "25px";
						li2.style.width = "800px";
					
					ul = document.createElement ("ul");
						if (i >= comecaEsconder) {
							ul.style.display = "none";
						}
						
						ul.style.fontFamily = "comic sans ms";
						ul.style.fontSize = "14px";
						ul.style.fontWeight = "bold";
						ul.style.listStyle = "none";
						ul.style.margin = "0";
						ul.style.padding = "0";
					
					radio1 = document.createElement ("input");
						radio1.setAttribute ("name", "pergunta" + maisUm);
						radio1.setAttribute ("type", "radio");
					
					radio2 = document.createElement ("input");
						radio2.setAttribute ("name", "pergunta" + maisUm);
						radio2.setAttribute ("type", "radio");
					
					
					label1.appendChild (radio1);
					label1.appendChild (document.createTextNode (perguntas[i][0]));
					
					label2.appendChild (radio2);
					label2.appendChild (document.createTextNode (perguntas[i][1]));
					
					conteudo1.appendChild (label1);
					conteudo1.appendChild (label2);
					
					li2.appendChild (conteudo1);
					li2.appendChild (conteudo2);
					
					ul.appendChild (li1);
					ul.appendChild (li2);
					
					this.appendChild (ul);
					
					li2.onclick = (function (maisUm) {
						return function (event) {
							event = event ? event : window.event;
							target = event.target ? event.target : event.srcElement;
							
							if (target.nodeName.toLowerCase () === "input") {
								este_uls = este.getElementsByTagName ("ul");
								parente = target.parentNode;
								
								if (este_uls.length !== maisUm) {
									este_uls[maisUm].style.display = "block";
								}
								
								tresParentesAtras = parente.parentNode.parentNode;
									tresParentesAtras_divs = tresParentesAtras.getElementsByTagName ("div");
								
								tresParentesAtras_divs[0].style.display = "none";
								tresParentesAtras_divs[1].innerHTML = parente.childNodes[1].nodeValue;
								
								tresParentesAtras.style.backgroundColor = "rgb(133, 194, 38)";
							}
						}
					})(maisUm);
				}
			}
			
			window.onload = function () {
				var perguntas = new Array (
					new Array ("Boleto bancário", "Cartão de crédito"),
					new Array ("Já sou cliente", "Novo cliente"),
					new Array ("Você sabia que o sabiá sabia assobia ?", "O peito do pé do pedro é preto ?"),
					new Array ("Boleto é para fracos, eu pago em DINHEIRO !!!", "Dinheiro é para fracos, eu pago em SHORYUKEN !!!"),
					new Array ("As árvores, ar-árvores, árvorezes, árvores", "somos nozes :) Flowwwwwwwwwwwwww")
				)
				
				document.getElementById ("perguntasRadio").perguntasRadio (perguntas, 2);
			}
		</script>
		
		<title>Perguntas</title>
	</head>
	
	<body>
		<div id = "perguntasRadio"></div>
	</body>
</html>

Testado no Firefox 3.6 e no IE8, se quiser colocar mais perguntas é so adicionar quantos arrays você quiser (infinito) :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

angus    0

angus
Postado

Velho, muito obrigado mesmo.

Destruiu na resposta, perfeito.

 

Você fez tudo pra mim, so queria saber como funcionava para começar a desenvolver... sem reclamações hehehe.

muito bom!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito