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

Question

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

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I'm doing a very simple evaluation system using form validation (I know that's correct but it's just a study), and it has radios in html along with label and img, I do not know how to do 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>

javascript html css

asked by anonymous 14.10.2017 / 19:49

2 answers

Installing and configuring the composer on my localhost Compile error "undefined reference to 'sqrt'" in Atom editor

score 0 · Answer 1

I advise you to use Jquery to get a solution (although javascript 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 onchange event of all radios as follows:

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

score 0 · Answer 2

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

The :checked pseudo-class 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 switched to a state switched on. When an input is checked, it receives the characteristics you want. Using + 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><inputtype="radio" id="ruim" name="av1" value="Ruim">
	 	<label for="ruim"><img name="imgl" id="img2" src="https://i.stack.imgur.com/2nfI1.png"></label><inputtype="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><inputtype="radio" id="bom" name="av1" value="Bom">
	 	<label for="bom"><img name="imgl" id="img4" src="https://i.stack.imgur.com/Javo4.png"></label><inputtype="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><inputtype="radio" id="otimo" name="av1" value="Otimo">
	 	<label for="otimo"><img name="imgl" id="img6" src="https://i.stack.imgur.com/xJC07.png"></label><inputtype="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: