[Resolvido] Grupos de Radio, mostra um e esconde outros

Thiago Paschoalin · Fevereiro 2, 2009

Preciso do seguinte, tenho 15 grupos de input="radio", cada grupo com 5 opções e fiz um java bem simples onde quando selecionado aquele rádio daquele grupo, mostra um valor e esconde os outros valores do mesmo grupo.

O que eu fiz, eu tenho que fazer várias funções no mesmo input="radio", e gostaria de reduzir isso....

Olhem meu código original (são testes somente):

function Hide(id){
var Procura = document.getElementById(id);
Procura.style.display="none";
}
function Show(id){
var Procura = document.getElementById(id);
Procura.style.display="block";
}

<label><input type='radio' name='Opcao01' value='Opcao01_1' onFocus="Show('$Id01'); Hide('$Id02'); Hide('$Id03');"> $Nome01</label><br>
<label><input type='radio' name='Opcao01' value='Opcao01_2' onFocus="Show('$Id02'); Hide('$Id01'); Hide('$Id03');"> $Nome02</label><br>
<label><input type='radio' name='Opcao01' value='Opcao01_3' onFocus="Show('$Id03'); Hide('$Id01'); Hide('$Id02');"> $Nome03</label>

<br><BR><Br><Br>

<label><input type='radio' name='Opcao02' value='Opcao02_1' onFocus="Show('$Id04'); Hide('$Id05'); Hide('$Id06');"> $Nome04</label><br>
<label><input type='radio' name='Opcao02' value='Opcao02_2' onFocus="Show('$Id05'); Hide('$Id04'); Hide('$Id06');"> $Nome05</label><br>
<label><input type='radio' name='Opcao02' value='Opcao02_3' onFocus="Show('$Id06'); Hide('$Id04'); Hide('$Id05');"> $Nome06</label>

<Br><br><Br><Br>

<table id='COMPONENTES' width='320' border='0' cellspacing='0' cellpadding='0'>

<tr style='display:none' id='$Id01'><td>$Nome01 - $Preco01</td></tr>
<tr style='display:none' id='$Id02'><td>$Nome02 - $Preco02</td></tr>
<tr style='display:none' id='$Id03'><td>$Nome03 - $Preco03</td></tr>

<tr style='display:none' id='$Id04'><td>$Nome04 - $Preco04</td></tr>
<tr style='display:none' id='$Id05'><td>$Nome05 - $Preco05</td></tr>
<tr style='display:none' id='$Id06'><td>$Nome06 - $Preco06</td></tr>

</table>

Estão vendo, tenho que colocar vários SHOW() e HIDE() em cada 'RADIO', porém mais para frente isso vai me causar problemas, pois esses radio serão duplicados através de WHILE do PHP, então não terá como saber quantos HIDE() eu vou ter que colocar lá...

EU tenho um exemplo aqui de uma função que faz a função inversa...

function changeCell(id) { 
var cell = document.getElementById(id); 
cell.style.background="#ff0000"; 
cell.onmouseout=function() { 
cell.style.background="#ffffff"; 
} 
} 

Bom, eu coloco um OnMouseOver="changecell('Id')" e lá mesmo quando eu tiro o mouso ele já faz uma outra ação... 
Com isso não tenho a necessidade de fazer um OnMouseOver e um OnMouseOut.

COmo faria uma função igual esta ultima para grupos.

Grato desde já.

Bruno_Ferreira · Fevereiro 2, 2009

Faça o seguinte, pegue como parâmetro para a sua função de esconder o elemento, o id do radio selecionado e o nome do grupo onde o radio está, e na função você esconde todos os elementos que estão vinculados ao nome do grupo de radios e exibe novamente apenas o selecionado.

Pra isso, você vai ter que agrupar os elementos da tabela componentes pelos mesmos grupos de radios, pra isso, utilize um elemento que identifique cada um individualmente e outro que identifique o grupo de componentes, por exemplo, Id para identificar os elementos individualmente e Class para identificar um grupo.

É mais ou menos por aí, se não tiver entendido ou tiver qualquer dúvida é só falar.

Falou!!! até mais.

Thiago Paschoalin · Fevereiro 2, 2009

Fala Bruno, na verdade eu te entendi, mas o meu problema é que não sou muito amigo do javascript não.... huaahuhaauhauhauh

Resumindo, não sei fazer o que me disse... Mas de qualquer forma, eu vou fazer algumas tentativas.

Obrigado.

Bruno_Ferreira · Fevereiro 2, 2009

É simples, usa o javascript para mudar o display para esconder/mostrar os elementos, primeiro você aculta todo o grupo, depois você exibe o elemento que interessa, usando mais ou menos a mesma coisa que você está fazendo mas usando as funções getElementsByName, que vai lhe retornar um array com os elementos com aquele nome, e getElementByClass, que vai lhe retornar o elemento que tiver aquela classe. É bem simples.

mais ou menos assim:

function Show(id, name){
var Procura[] = document.getElementsByName(name);

for(var i=0; i<Procura.length; i++)
	 Procura[i].style.display="none";

document.getElementById(id).style.display="block"
}

<label><input type='radio' name='Opcao01' value='Opcao01_1' onFocus="Show('$Id01', 'Opcao01');"> $Nome01</label><br>
<label><input type='radio' name='Opcao01' value='Opcao01_2' onFocus="Show('$Id02', 'Opcao01');"> $Nome02</label><br>
<label><input type='radio' name='Opcao01' value='Opcao01_3' onFocus="Show('$Id03', 'Opcao01');"> $Nome03</label>

Tô meio com pressa aqui e não deu pra testar aqui não mas a idéia é essa, creio que tenha captado, qualquer coisa estamos aí hein, até mais.

Thiago Paschoalin · Fevereiro 2, 2009

Tranquilo cara, mas não está dando certo. Olha o meu código completo, eu não te mostrei tudo, mas acho que isso vai fazer diferença...

Perceba que no final tem uma nova tabela com <tr id='IGUAL DO RADIO'> é lá que quero que altere....

Veja tudo, e diga o que acha:

<script language='JavaScript'>

function Hide(id){
var Procura = document.getElementById(id);
Procura.style.display="none";
}
function Show(id){
var Procura = document.getElementById(id);
Procura.style.display="block";
}

// Somar valores
function soma() 
{
REDEFINIR.Valor.value = 
(REDEFINIR.Memoria.value*1) + 
(REDEFINIR.HD.value*1)
}
</script>

<form name='REDEFINIR' method='post' action='Teste_PCTrade.php'>
<table id='CONTEUDO' width='690' height='100%' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td width='345' height='500' align='center'>

<table id='OPCOES' width='320' border='0' cellspacing='0' cellpadding='0'>
<tr id='Opcao01'><td height='90'>

<label><input type='radio' name='Opcao01' value='Opcao01_1' onFocus="Show('Id01'); Hide('Id02'); Hide('Id03'); 
java script:REDEFINIR.Memoria.value=500; soma();" checked='true'> $Nome01</label>
<br />
<label><input type='radio' name='Opcao01' value='Opcao01_2' onFocus="Show('Id02'); Hide('Id01'); Hide('Id03'); 
java script:REDEFINIR.Memoria.value=750; soma();"> $Nome02</label>
<br />
<label><input type='radio' name='Opcao01' value='Opcao01_3' onFocus="Show('Id03'); Hide('Id01'); Hide('Id02'); 
java script:REDEFINIR.Memoria.value=1000; soma();"> $Nome03</label>

</td></tr>
<tr id='Opcao02'><td height='90'>
<label><input type='radio' name='Opcao02' value='Opcao02_1' onFocus="Show('Id04'); Hide('Id05'); Hide('Id06'); 
java script:REDEFINIR.HD.value=500; soma();" checked='true'> $Nome04</label>
<br />
<label><input type='radio' name='Opcao02' value='Opcao02_2' onFocus="Show('Id05'); Hide('Id04'); Hide('Id06'); 
java script:REDEFINIR.HD.value=750; soma();"> $Nome05</label>
<br />
<label><input type='radio' name='Opcao02' value='Opcao02_3' onFocus="Show('Id06'); Hide('Id04'); Hide('Id05'); 
java script:REDEFINIR.HD.value=1000; soma();"> $Nome06</label>
<br />
</td>
</tr>
</table>

</td>
<td width='345' align='center'>

<table id='COMPONENTES' width='320' border='0' cellspacing='0' cellpadding='0'>

<tr style='display:block' id='Somar'><td>Total: R$<input name='Valor' type='text' class='Box' readonly='true'>
<input name='HD' type='hidden'>
<input name='Memoria' type='hidden'>
<br><Br></td></tr>

<tr style='display:none' id='Id01'><td>$Nome01 - $Preco01</td></tr>
<tr style='display:none' id='Id02'><td>$Nome02 - $Preco02</td></tr>
<tr style='display:none' id='Id03'><td>$Nome03 - $Preco03</td></tr>

<tr style='display:none' id='Id04'><td>$Nome04 - $Preco04</td></tr>
<tr style='display:none' id='Id05'><td>$Nome05 - $Preco05</td></tr>
<tr style='display:none' id='Id06'><td>$Nome06 - $Preco06</td></tr>

</table>

</td>
</tr>
</table>
</form>

webmind · Fevereiro 2, 2009

tiago estive vendo tua duvida mas nao cheguei a entender bem o que queres fazer.

Tens la escrito que tens 15 grupos com 5 opcoes em cada, mas no teu codigo nao tens la os 15 grupos, presumo pk seja teste.

Mas o que eu nao entendi tb foi que accao queres que execute apos a seleccao do radio e que valores queres mostrar

Pode ser que consiga ajudar

Thiago Paschoalin · Fevereiro 2, 2009

Veja no meu código, abaixo dos RADIOS, tem uma TABELA com Id='COMPONENTES' e dentro dela, existem <tr Id='Recebida pelo Radio'>

E se reparar bem, os TR estão com os mesmo ID dos meus Radios, ou seja, cada opção do Radio, é nessa tabela que irá mostrar o resultado.

Agora, o que eu queria...

Quero trocar essas 2 funções:

function Hide(id){
var Procura = document.getElementById(id);
Procura.style.display="none";
}
function Show(id){
var Procura = document.getElementById(id);
Procura.style.display="block";
}

Por uma única função, pq ?

Pq no meu exemplo eu expecifiquei 3 opções para cada radio, mas posteriormente esses radios serão chamados pelo BANCO com PHP, então poderá ter mais do que 3 opções.

Então queria uma função que pegasse um certo grupo, e escontesse todos e mostrasse somente o que eu escolhesse no radio, mas que isso seja independente da quantidade existente nesse grupo !

Entendeu ? Eu sou meio ruim de explicar as coisas mesmo, se não endenter, me avisa... grato desde já.

klonder · Fevereiro 3, 2009

Thiago Paschoalin, divirta-se!!!

<html>
<head>
	<title>by Klonder</title>
</head>
<body>
<script>
//Script by Klonder
function Show(grupo,nome,preco) {
document.getElementById("$Id"+grupo).innerHTML = nome + " - " + preco;
}
</script>

<input type='radio' name='Opcao01' value='Opcao01_1' onClick="Show(1,'$Nome01','$Preco01')"> $Nome01<br>
<input type='radio' name='Opcao01' value='Opcao01_2' onClick="Show(1,'$Nome02','$Preco02')"> $Nome02<br>
<input type='radio' name='Opcao01' value='Opcao01_3' onClick="Show(1,'$Nome03','$Preco03')"> $Nome03

<br><br>
<input type='radio' name='Opcao02' value='Opcao02_1' onClick="Show(2,'$Nome04','$Preco04')"> $Nome04<br>
<input type='radio' name='Opcao02' value='Opcao02_2' onClick="Show(2,'$Nome05','$Preco05')"> $Nome05<br>
<input type='radio' name='Opcao02' value='Opcao02_3' onClick="Show(2,'$Nome06','$Preco06')"> $Nome06<br>
<input type='radio' name='Opcao02' value='Opcao02_4' onClick="Show(2,'$Nome07','$Preco07')"> $Nome07<br>
<input type='radio' name='Opcao02' value='Opcao02_5' onClick="Show(2,'$Nome08','$Preco08')"> $Nome08<br>
<input type='radio' name='Opcao02' value='Opcao02_6' onClick="Show(2,'$Nome09','$Preco09')"> $Nome09<br>
<input type='radio' name='Opcao02' value='Opcao02_7' onClick="Show(2,'$Nome10','$Preco10')"> $Nome10<br>

<br>
<input type='radio' name='Opcao03' value='Opcao03_1' onClick="Show(3,'$Nome11','$Preco11')"> $Nome11<br>
<input type='radio' name='Opcao03' value='Opcao03_2' onClick="Show(3,'$Nome12','$Preco12')"> $Nome12<br>
<input type='radio' name='Opcao03' value='Opcao03_3' onClick="Show(3,'$Nome13','$Preco13')"> $Nome13

<br><br>
<table border="0">
<tr><td>Lista de produtos:</td></tr>
<tr><td><div id="$Id1"></div></td></tr>
<tr><td><div id="$Id2"></div></td></tr>
<tr><td><div id="$Id3"></div></td></tr>
</table>
</body></html>

Thiago Paschoalin · Fevereiro 3, 2009

Hauhauahauhha... COM CERTEZA irei me divertir.... MUITO OBRIGADO klonder !

Ficou PERFEITO, nada menos que isso.

Arquivado

[Resolvido] Grupos de Radio, mostra um e esconde outros

Recommended Posts

Thiago Paschoalin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Paschoalin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Paschoalin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

webmind 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Paschoalin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Paschoalin 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

[Resolvido] JavaScript - Exibir logo dentro da Tabela html

Fóruns

Tempo Real

Informação importante