How to display DIV if radio is marked?

Question

I have the following code:

<form>
   <input type="radio" id="div1" name="consulta[]" value="1">Opção 1
   <input type="radio" id="div2" name="consulta[]" value="2">Opção 2
   <input type="submit" value="Registrar"> 
</form>
<div id="m1" style="display:none">
    DIV 1
</div>
<div id="m2" style="display:none">
    DIV 2
</div>

I need the DIV 1 to appear (changing its display in css) only when the radio div1 is clicked, and the same for the DIV 2.

What’s the simplest way to do that?

Answer 1

$('input:radio[name="consulta"]').change(function() {
        if ($(this).val() == 1) {
          $("#m1").attr("hidden", false);
          $(this).attr("checked", true);
          
          $("#m2").attr("hidden", true);
          $(this).attr("checked", true);
          
        } else if ($(this).val() == 2) {
          $("#m2").attr("hidden", false);
          $(this).attr("checked", true);
          
          $("#m1").attr("hidden", true);
          $(this).attr("checked", true);
        }
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
   <input type="radio" id="div1" name="consulta" checked value="1">Opção 1
   <input type="radio" id="div2" name="consulta" value="2">Opção 2
   <input type="submit" value="Registrar"> 
</form>
<div id="m1">
    DIV 1
</div>
<div id="m2" hidden>
    DIV 2
</div>

A simple solution is to use the method change() of jQuery, every time there is an event in a input radio, the change() method will be called.

Answer 2

If you change the HTML structure and put the <div> inside the form, after the inputs, can make this toggle effect only with CSS. In that question an explanation about the selector +.

form div {
  display: none;
  color: red
}

input[type='radio']:checked + div {
  display: inline-block
}

<form>
  <label for='div1'>Opção 1</label>
  <input type='radio' id='div1' name='consulta[]' value='1'>
  <div id='m1'>
    DIV 1
  </div>
  
  <label for='div2'>Opção 2</label>
  <input type='radio' id='div2' name='consulta[]' value='2'>
  <div id='m2'>
    DIV 2
  </div>
</form>

Answer 3

Using jQuery, there are several ways to solve your problem, here I list a:

var viewDivs = {
  init: function(){
    var that = this;
    
    //Elements
    that.inputs = $('input:radio');
    that.divs = $('.div-radiobox');
    
    //Events
    that.inputs.change(function(){
        that.render();
    });
  },
  
  render: function(){
      //input selecionado
      var idDiv = this.inputs.filter(':checked').attr('data-div');
      
      this.divs.each(function(){
        var $this = $(this);
        if($this.attr('id') == idDiv){
          $this.show();
          
        }else{
          $this.hide();
          
        }
     })
  }
}

viewDivs.init();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
   <input type="radio" data-div="div1" name="consulta[]" value="1">Opção 1
   <input type="radio" data-div="div2" name="consulta[]" value="2">Opção 2
   <input type="submit" value="Registrar"> 
</form>
<div id="div1" class="div-radiobox" style="display:none">
    DIV 1
</div>
<div id="div2" class="div-radiobox" style="display:none">
    DIV 2
</div>

Answer 4

To the letter I believe this is it from here...

let radio = document.querySelectorAll(".rd");

for(let i = 0; i < radio.length; i++) {
    radio[i].onclick = function(){
       let div = document.querySelectorAll('.onOff');
       for(let i = 0; i < div.length; i++) div[i].style.display = 'none';
       document.getElementById('e' + radio[i].id).style.display = "block";
    } 
}

<form>
   <input type="radio" id="div1" class="rd" name="consulta[]" value="1">Opção 1
   <input type="radio" id="div2" class="rd" name="consulta[]" value="2">Opção 2
   <input type="submit" value="Registrar"> 
</form>
<div id="ediv1" class="onOff" style="display:none">
    DIV 1
</div>
<div id="ediv2" class="onOff" style="display:none">
    DIV 2
</div>

So you can add more inputs and reference them with a div, just add the 'e' and the corresponding example...

<input type="radio" id="div7" name="consulta" value="7">Opção 7

...

<div id="ediv7" class="onOff" style="display:none">
    DIV 7
</div>

Answer 5

Why don’t you use the attribute Hidden?

And you can test here

<form onchange="myFunction();">
  <label for='div1'>Opção 1</label>
  <input type='radio' id='div1' name='consulta[]'  value='1' >
  <div id='m1' hidden>
    DIV 1
  </div>

  <label for='div2'>Opção 2</label>
  <input type='radio' id='div2' name='consulta[]' value='2'>
  <div id='m2' hidden>
    DIV 2
  </div>
</form>

<script>
function myFunction() {
    var $radio1 = document.getElementById("div1");
    var $div1 = document.getElementById("m1");
    var $radio2 = document.getElementById("div2");
    var $div2 = document.getElementById("m2");
    if($radio1.checked){
        $div1.removeAttribute("hidden"); 
    }else{
        $div1.setAttribute("hidden", "hidden");
    }
    if($radio2.checked){
        $div2.removeAttribute("hidden"); 
    }else{
        $div2.setAttribute("hidden", "hidden");
    }
}
</script>