I have a code that does form with questions and various types of response ("text, radio, check-box") and would like a code with jquery to put in my html that when the person select text- shows input type="text" and hides input type="radio" and input type="checkbox" and the same with others, like Google form.
Follow the image as it currently stands:
$("#tipo_input").on("change", function() {
var tipo = $(this).val();
$("span[class^='tipo-']:not(.tipo-"+tipo+")").hide();
$("span[class='tipo-"+tipo+"']").show();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label>Tipodecampo</label><selectid="tipo_input">
<option value=""> Selecione...</option>
<option value="texto"> Campo de texto</option>
<option value="radio"> Múltipla escolha</option>
<option value="check"> Caixas de seleção</option>
</select>
<br>
<br>
<span class='tipo-texto'>
<label>Campo texto</label>
<input type="text">
<br>
<br>
</span>
<span class='tipo-radio'>
<label>
<input type="radio"> Opção radio 1
<input type="radio"> Opção radio 2
</label>
<br>
<br>
</span>
<span class='tipo-check'>
<label>
<input type="checkbox"> Opção check
</label>
</span>I do not know how your HTML is, but you can do something like this:
See that there are span elements with "type- {input_type}" classes involving each type of input, along with their labels. I use these classes to do the following using JQuery:
What the code does is to select elements of type span that do not have the class "type- {selective_type}" (using the: not selector, see more about it here ) and hide them, as well as displaying the span element with the selected class, if it has been previously hidden.
Example link working in JSFiddle: link