0

Estou fazendo um sistema de avaliação bem simples usando validação de formulário (sei q n é correto mas é apenas um estudo), e tem radios no html juntamente com label e img, n sei como fazer para que quando um radio for selecionado, o label(img) fique com display = none.

<div class="fomulario">
 	<form class="avlac">
	 	<input type="radio" id="mtruim" name="av1" value="Muito Ruim">
	 	<label for="mtruim"><img name="imgl" id="img1" src="img/mtruim.png"></label> 

	 	<input type="radio" id="ruim" name="av1" value="Ruim">
	 	<label for="ruim"><img name="imgl" id="img2" src="img/ruim.png"></label>	

	 	<input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
	 	<label for="maisoumenos"><img name="imgl" id="img3" src="img/maismenos.png"></label> 

	 	<input type="radio" id="bom" name="av1" value="Bom">
	 	<label for="bom"><img name="imgl" id="img4" src="img/bom.png"></label> 

	 	<input type="radio" id="mtbom" name="av1" value="Muito Bom">
	 	<label for="mtbom"><img name="imgl" id="img5" src="img/mtbom.png"></label> 

	 	<input type="radio" id="otimo" name="av1" value="Otimo">
	 	<label for="otimo"><img name="imgl" id="img6" src="img/otimo.png"></label> 
	 	<input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
	</form>
 </div>

2 Respostas 2

0

Aconselho-te a usar Jquery para obteres uma solução (se bem com javascript também resulta!)

$('#mtruim').on('change', function() {
   var valor = $('#mtruim:checked').val();
   alert($('#mtruim:checked').val()); 

   //Agora é só comparares os valores para esconder a imagem pretendida...
   if($('#mtruim:checked').val() == "Bom"){
       alert('escolheu bomm!');
       $("#img").hide();
   }
});

em alternativa podes capturar o evento onchange de todos os radio's da seguinte maneira:

$('input[type=radio]').change(function(e) {
    if (this.id == 'mtruim') {
        alert("Muito ruim marcado!");
    } else if(this.id == 'ruim'){
        alert("Ruim marcado");
    }
  });
3
  • eu ainda estou começando a estudar jquery, mas vou tentar aplicar, mt obrigado!!! Commented 14/10/2017 às 18:05
  • neste seu caso eu terei q fzer para cada radio, certo? Commented 14/10/2017 às 18:06
  • no primeiro caso sim, mas editei a resposta! assim poderás capturar de todos e não precisas de fazer individualmente
    – 13dev
    Commented 14/10/2017 às 18:12
0

Antes de tentar fazer algo com JS ou jQuery tenha certeza que não é possível fazer com Propriedades CSS3. Essa simples mudança vai melhorar muito a performance do seu site.

A pseudo-classe :checked de um seletor CSS representa um elemento radio (<input type="radio">), checkbox (<input type="checkbox">) ou option (<option> em um <select>) que está marcada ou alternado para um estado ligado. Quando um input é checado, ele recebe as características que você quiser. Usando o + label, retornamos apenas o primeiro objeto imediatamente ao redor deste input. Isso significa que o seletor irá retornar o label imediatamente ao lado de um input que está selecionado.


Exemplo 1

:checked + label {
    display :none;
}
<div class="fomulario">
 	<form class="avlac" id="avlac"  name="avlac">
	 	<input type="radio" id="mtruim" name="av1" value="Muito Ruim">
	 	<label for="mtruim"><img name="imgl" id="img1" src="https://i.sstatic.net/E2xBV.png"></label> 

	 	<input type="radio" id="ruim" name="av1" value="Ruim">
	 	<label for="ruim"><img name="imgl" id="img2" src="https://i.sstatic.net/2nfI1.png"></label>	

	 	<input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
	 	<label for="maisoumenos"><img name="imgl" id="img3" src="https://i.sstatic.net/OBecB.png"></label> 

	 	<input type="radio" id="bom" name="av1" value="Bom">
	 	<label for="bom"><img name="imgl" id="img4" src="https://i.sstatic.net/Javo4.png"></label> 

	 	<input type="radio" id="mtbom" name="av1" value="Muito Bom">
	 	<label for="mtbom"><img name="imgl" id="img5" src="https://i.sstatic.net/dz7Wr.png"></label> 

	 	<input type="radio" id="otimo" name="av1" value="Otimo">
	 	<label for="otimo"><img name="imgl" id="img6" src="https://i.sstatic.net/xJC07.png"></label> 
	 	<input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
	</form>
</div>

Exemplo 2

:checked + label {
    font: italic bold 20px Georgia, serif;
    color:red;
}
<div class="fomulario">
 	<form class="avlac" id="avlac"  name="avlac">
	 	<input type="radio" id="mtruim" name="av1" value="Muito Ruim">
	 	<label for="mtruim">muito ruim</label> 

	 	<input type="radio" id="ruim" name="av1" value="Ruim">
	  <label for="ruim">ruim</label> 	

	 	<input type="radio" id="maisoumenos" name="av1" value="Mais ou Menos">
	 	<label for="maisoumenos">mais ou menos</label> 

	 	<input type="radio" id="bom" name="av1" value="Bom">
	 	<label for="bom">bom</label> 

	 	<input type="radio" id="mtbom" name="av1" value="Muito Bom">
	 	<label for="mtbom">muito bom</label> 

	 	<input type="radio" id="otimo" name="av1" value="Otimo">
	 	<label for="otimo">otimo</label> 
	 	<input type="button" name="envio" value="ENVIAR" onclick="enviar1()">
	</form>
</div>

Fontes:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .