I do not know how to do that when the radio that has an img disappears, when selected (JAVASCRIPT if possible)

Question

I’m making a very simple evaluation system using form validation (know q n is correct but it’s just a study), and have radios in html along with label and img, n know how to make so that when a radio is selected, the label(img) stays with 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>

Answer 1

I advise you to use Jquery to get a solution (if well with javascript also works!)

$('#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();
   }
});

alternatively you can capture the event onchange of all radio’s as follows:

$('input[type=radio]').change(function(e) {
    if (this.id == 'mtruim') {
        alert("Muito ruim marcado!");
    } else if(this.id == 'ruim'){
        alert("Ruim marcado");
    }
  });

Answer 2

Before trying to do something with JS or jQuery make sure you can’t do it with CSS3 Properties. This simple change will greatly improve the performance of your site.

The pseudo-class :checked of a CSS selector represents a radio element (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) that is checked or toggled to an on state. When an input is checked, it gets the characteristics you want. Using the + label, we return only the first object immediately around this input. This means that the selector will return the label immediately next to an input that is selected.

---

Example 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.stack.imgur.com/E2xBV.png"></label> 

	 	<input type="radio" id="ruim" name="av1" value="Ruim">
	 	<label for="ruim"><img name="imgl" id="img2" src="https://i.stack.imgur.com/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.stack.imgur.com/OBecB.png"></label> 

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

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

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

Example 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>

Sources:

• Pseudo-classes
• :checked