Aparecer e desaparecer input a partir de radio button - Enquete

[Eder Cuer]

Olá galera, estou com um probleminha pra resolver em um enquete que estou fazendo. A enquete já foi criada, ta praticamente pronta, mas tem uma coisa que não consegui implementar.

Eu estou fazendo uma enquete de avaliação, então cada setor tem algumas perguntas que são avaliadas de 1 a 5, se o usuário clicar em um valor menor que 4 pontos, deve aparecer um input para o usuário justificar. Segue o que tenho feito:

for($j=0; $j < mysql_num_rows($result); $j++){

	$codOp  = mysql_result($result, $j, 'id_op');
	$nomeOp = mysql_result($result, $j, 'nome_op');


	echo'
		<span id="textoOp">'.htmlentities($nomeOp).'</span><br />
		<span id="input">
                      <input type="radio" name="opcao'.$y.'" value="1" />1 
                      <input type="radio" name="opcao'.$y.'" value="2" />2  
                      <input type="radio" name="opcao'.$y.'" value="3" />3 
                      <input type="radio" name="opcao'.$y.'" value="4" />4 
                      <input type="radio" name="opcao'.$y.'" value="5" />5
                      <br />
                 </span>
				';
	$y++;

}

[Eder Cuer]

Ninguém bom em jquery que possa me ajudar?

[Mog.Lucas]

Opção 1

for($j=0; $j < mysql_num_rows($result); $j++){
	(..)
	echo'
		<span id="textoOp">'.htmlentities($nomeOp).'</span><br />
		<span id="input">
                      <input type="radio" name="opcao'.$y.'" value="1" />1 
                      <input type="radio" name="opcao'.$y.'" value="2" />2  
                      <input type="radio" name="opcao'.$y.'" value="3" />3 
                      <input type="radio" name="opcao'.$y.'" value="4" />4 
                      <input type="radio" name="opcao'.$y.'" value="5" />5
                      <br />
                      [B][COLOR="Red"]<script type="text/javascript">
                      // Não é o melhor lugar para posicionar o JS, mas..
                      $(\'input[name="opcao'+$y+'"]\').change(function(){
                              $(\'#idDoInputQueVoceQuerMostrar\')hide(); // esconde o input independente de qual nota foi escolhida
                              if($(this).attr("value")<=4) {
                                       $(\'#idDoInputQueVoceQuerMostrar\').show(); // mostra se a nota for menor ou igual a 4
                              }
                      });
                      </script>[/COLOR][/B]
                 </span>
				';
         (..)		
}

PS: Fiz de cabeça, não testei.. talvez você tenha que converter o tipo do .attr('value') para fazer a comparação.

Opção 2

for (..) {
         echo'
		<span id="textoOp">'.htmlentities($nomeOp).'</span><br />
		<span id="input">
                      <input type="radio" name="opcao'.$y.'" value="1" [COLOR="Red"][B]onclick="controlaInput($y, 1);"[/B][/COLOR] />1 
                      <input type="radio" name="opcao'.$y.'" value="2" [B][COLOR="Red"]onclick="controlaInput($y, 1);"[/COLOR][/B] />2  
                      <input type="radio" name="opcao'.$y.'" value="3" [B][COLOR="Red"]onclick="controlaInput($y, 1);"[/COLOR][/B] />3 
                      <input type="radio" name="opcao'.$y.'" value="4" [B][COLOR="Red"]onclick="controlaInput($y, 1);"[/COLOR][/B] />4 
                      <input type="radio" name="opcao'.$y.'" value="5" [B][COLOR="Red"]onclick="controlaInput($y, 0);"[/COLOR][/B] />5
                      <br />
[COLOR="Red"][B]                      <input type="text" name="opcaoJustificativa'.$y.'" value="" />[/B][/COLOR]
                 </span>
				';
(..)
}

PS: Repare que é 'onclick' ao invés de 'onchange' como no primeiro código.. pois no segundo utilizamos o javascript puramente no DOM e o IE tem problemas com o evento 'onchange'.. já no primeiro utilizamos jQuery, que resolve isso.

Adicionando esse JAVASCRIPT:

/**
 * Função para mostrar ou não o input, baseada na nota escolhida
 * @param $opcaoNumero int Recebe o 'id da seção'
 * @param $mostrar tinyint boolean 1 - Sim, 0 - Não
 */
function controlaInput($opcaoNumero, $mostrar) {
      $('input[name="opcaoJustificativa'+$opcaoNumero+'"]').hide();
      if ($mostrar) {
           $('input[name="opcaoJustificativa'+$opcaoNumero+'"]').show();
      }
}

Fiz tudo de cabeça, direto aqui no fórum.. devem ter alguns errinhos.. entenda a lógica e você conseguirá resolve-los

[Eder Cuer]

Valeu Mog.Lucas, deu certo aqui. Dei uma adaptada e funcionou. Estou com uma dúvida, agora na parte de validação, tenho o seguinte código:

$(document).ready( function() {
	$("#enquete").validate({
		rules:{
			opcao1: "required",
			opcao2: "required",
			opcao3: "required",

		},
		// Define as mensagens de erro para cada regra
		messages:{
			opcao1: "Escolha uma opcao",
			opcao2: "Escolha uma opcao",
			opcao3: "Escolha uma opcao",
		}
	});
});

Eu tenho várias opções, não tem como eu fazer um FOR dentro do js? Eu tentei algumas coisas aqui mas acabou não dando certo.

[Eder Cuer]

Pode fechar o tópico, já consegui.

[DiF]

Caso o autor do tópico necessite, o mesmo será reaberto, para isso deverá entrar em contato com a moderação solicitando o desbloqueio.