How to open and hide fields from a form by checking on button radio?

Question

I have a form and in it I have two radio fields that, depending on the choice it should open other fields to fill. Thank you

Answer 1

Here follows a more Generic implementation.

May use n input:radio to display n countenances.

//consultando os radio responsaveis por exibir os conteudos.
var tabs = document.querySelectorAll("[data-tab]");

//consultando os conteudos a serem exibidos.
var contents = document.querySelectorAll("[data-content]");

//declarando a função que será associada a cada input:radio
var tabOnClick = function (elem) {  
  for (var indice in contents) {
    //verificando se o input:radio selecionado está associado ao conteudo atual.
    var display = contents[indice].id == elem.target.dataset.tab ? "block" : "none";
    contents[indice].style.display = display;
  }
}

//associando todos os input:radio ao método declarado acima.
for (var indice in tabs) {
    tabs[indice].onclick = tabOnClick;
}

<div>
    <input id="label1" type="radio" name="tabs" data-tab="tab1" />
    <input id="label2" type="radio" name="tabs" data-tab="tab2" />
    <input id="label3" type="radio" name="tabs" data-tab="tab3" />
<div>
<div>
    <div id="tab1" data-content="" style="display: none;">
        <p>Lorem ipsum non leo dui pharetra posuere lectus maecenas pulvinar, tristique pretium nulla morbi non convallis tellus nibh urna, fames lacinia curabitur suspendisse quis cubilia quis nostra.</p>
    </div>
    <div id="tab2" data-content="" style="display: none;">
        <p>Lacinia libero eu lacinia mauris orci mauris luctus nulla magna egestas tristique, vitae quisque amet primis sociosqu vivamus donec maecenas sit faucibus non a class dapibus faucibus.</p>
    </div>
    <div id="tab3" data-content="" style="display: none;">
        <p>Metus maecenas a sem ipsum elit lacinia donec, mattis convallis erat donec sollicitudin ligula aliquet, potenti eget risus netus posuere cursus mattis feugiat cubilia rutrum porta ultrices quis commodo ornare sapien vitae.</p>
    </div>
<div>

Note that I used type properties data- to control the script flow. constumo advises this approach rather than using a class.

Answer 2

Use an event $.change to detect the chosen option and swap the visibility of the other field with $.show or $.hide.

Example: http://jsfiddle.net/cctwL6kb/2/

Answer 3

you could also use display:None and display:block in css

Answer 4

It depends on your dynamics, how you want it to appear, what your business rule is and everything else.... Follow an example:

function ver(elemento){
  if (elemento.checked){
    document.getElementById("div").style.display = "";
  }else{
    document.getElementById("div").style.display = "none";
  }
}
function verCampo(elemento){
  if (elemento.checked){
    document.getElementById("campo").style.display = "";
  }else{
    document.getElementById("campo").style.display = "none";
  }
}

function verPorRadio(elemento){
  switch (elemento){
    case "1" : 
      document.getElementById("div").style.display = "";
      document.getElementById("campo").style.display = "none";
      break;
    case "2" : 
      document.getElementById("div").style.display = "none";
      document.getElementById("campo").style.display = "";
      break;
  }
}

#radio {
  position:fixed;
  z-index:999; 
  right:20%; 
  top:0%;
  border:1px solid #000;
  padding:6px;
}

#check {
  position:fixed;
  z-index:999; 
  right:50%; 
  top:0%;
  border:1px solid #000;
  padding:6px;
}

.campo{
  position:fixed;
  z-index:999; 
  right:40%; 
  top:20%;
  border:1px solid #000;
  padding:6px;
}

<div id="radio">
  teste usando Check Box<br/>
  Ver div <input type="checkbox" onclick="ver(this)">
  Ver campo <input type="checkbox" onclick="verCampo(this)">
</div>

<div id="check">
  teste usando Radio<br/>
  Ver div <input type="radio" name="radio" value="1" onclick="verPorRadio(this.value)">
  Ver campo <input type="radio" name="radio" value="2" onclick="verPorRadio(this.value)">
</div>

<div id="div" class="campo" style="display: none;">teste, testando a div fechada</div>
<input type="text" id="campo" class="campo" style="display: none;">