Show div when radio button is checked, and hide all the other divs?

Question

I'm very new here, any help would be appreciated.

I’m trying to make a contact form which has 5 radio buttons, each radio button has its own div. Inside the div there's a textarea. When radio button 1 is checked, it shows the div, when radio button 2 is checked, it shows the div, but hides the div checked in radio button 1.

Checked radio buttons don't have to be in sequence, they just have to hide the other divs and show the div that is controlled in the currently radio button selected.

I’ve got it as far as when the radio button is checked it shows the div, but it does not hide the div when you select another radio button (all the divs remain shown when you check the radio buttons).

Below the code:

    function radioCheck(radio) {
    data = radio.getAttribute("data")
    switch (data) {
    case '1':
    document.getElementById('ifRadio'+data).style.display = 'block';
    break;
    case '2':
    document.getElementById('ifRadio'+data).style.display = 'block';
    break;
    case '3':
    document.getElementById('ifRadio'+data).style.display = 'block';
    break;
    case '4':
    document.getElementById('ifRadio'+data).style.display = 'block';
    break;
    case '5':
    document.getElementById('ifRadio'+data).style.display = 'block';
    break;
    default:
    document.getElementById('ifRadio1').style.display = 'none';
    
    }
    }

    <!--Radio buttons-->
    <div class="col-md-6">  
    <label class="radio-inline">1
    <input type="radio" onclick="javascript:radioCheck(this);" data=1 name="fid_7" id="showCheck1"></label>
    
    <label class="radio-inline">2
    <input type="radio" onclick="javascript:radioCheck(this);" data=2 name="fid_7" id="showCheck2"></label>
    
    <label class="radio-inline">3
    <input type="radio" onclick="javascript:radioCheck(this);" data=3 name="fid_7" id="showCheck3"></label>
    
    <label class="radio-inline">4
    <input type="radio" onclick="javascript:radioCheck(this);" data=4 name="fid_7" id="showCheck4"></label>
    
    <label class="radio-inline">5
    <input type="radio" onclick="javascript:radioCheck(this);" data=5 name="fid_7" id="showCheck5"></label>
    </div>
    
    <!--If radio 1-->
     <div id="ifRadio1" style="display:none">
    Why did you rate us that way? <br><textarea type="text" id='Radio1' name='yes'></textarea><br>
    What’s not working well?<br> <textarea class="form-control" type="text"></textarea>
     </div>
        
    
    <!--If radio 2-->
     <div id="ifRadio2" style="display:none">
    Why did you rate us that way? <br><textarea class="form-control" type="text" id='Radio2' name='yes'></textarea><br>
    What’s not working well?<br> <textarea class="form-control" type="text"></textarea>
     </div>
              
          
    <!--If radio 3-->     
     <div id="ifRadio3" style="display:none">
    Why did you rate us that way? <br><textarea class="form-control" type="text" id='Radio3' name='yes'></textarea><br>
    How better can we suit your needs? <br><textarea class="form-control" type="text"></textarea>
     </div>        
     
    <!--If radio 4-->     
     <div id="ifRadio4" style="display:none">
    Why did you rate us that way? <br><textarea class="form-control" type="text" id='ifRadio4' name='yes'></textarea><br>
    Do our timing works for you? <br><textarea class="form-control" type="text"></textarea>
     </div>
        
     <!--If radio 5-->     
     <div id="ifRadio5" style="display:none">
    Why did you rate us that way? <br><textarea class="form-control" type="text" id='ifRadio4' name='yes'></textarea><br>
    Do our timing works for you? <br><textarea class="form-control" type="text"></textarea>
     </div> 

Answer 1

Stylz, I don't know if this is what you mean but the solution I found is this:

function display() {
  var div0classes = document.getElementById("radio0div").classList;
  var div1classes = document.getElementById("radio1div").classList;
  var div2classes = document.getElementById("radio2div").classList;

  if (document.getElementById('radio0').checked) {
    div1classes.add("hidden");
    div2classes.add("hidden");

  } else if (document.getElementById('radio1').checked) {
    div0classes.add("hidden");
    div2classes.add("hidden");

  } else if (document.getElementById('radio2').checked) {
    div0classes.add("hidden");
    div1classes.add("hidden");

  }
}

<form>
  <input type="radio" name="radio" id="radio0" value="radio0">radio0<br>
  <div id="radio0div">
    u can see me yay.
  </div>

  <input type="radio" name="radio1" id="radio1" value="radio1">radio1<br>
  <div id="radio1div">
    u can see me yay.
  </div>

  <input type="radio" name="radio2" id="radio2" value="radio2">radio2<br><br>
  <div id="radio2div">
    u can see me yay.
  </div>

  <button type="button" onclick="display()"> 
    Submit 
</button> And this is the script I used to check if a radio is checked.

Answer 2

The tips I can give you in tackling your problem are:

1. Styles should be in the stylesheet as it would be efficient to just add or remove classes when styling dynamically. In your style sheet you could have this, the chosen referring to the text of the clicked radio button while the notChosen is used to hide the text of the other radio buttons

.chosen { display: initial; }
.notChosen { display: none; }

2. And in your javascript you could just place an event handler in the radio buttons and add/remove the .chosen or the .notChosen class. How to add or remove classes using vanilla javascript.

To efficiently hide the rest without a very lengthy code, you can use siblings to refer to the other radio buttons and add the class notChosen to them How to implement siblings in vanilla javascript

I suggest that you try to learn jQuery as it would solve your problem and future problems with more ease. To add or remove classes in jQuery you just need to use toggleClass() To refer to the other radio buttons other than the clicked one using jQuery you just need to use siblings()

Answer 3

Using your current coding style on this project with data attributes, events in the inline onclick fashion, and etc, so that you can see how this possible fix relates to your existing code and question closely.

First, you have to have a way to either remember which div is "open" or simply as the following demonstrates: hide them all before showing the relevant one. It happens so quick that there will be no visible difference.

function radioCheck(radio) {
    data = radio.getAttribute("data")
    
    // Hide all divs
    
    for (var i = 0; i < 5; i++) { // assuming your data attr 1,2,3,..,N
        var el = 'ifRadio' + (i + 1); // ifRadio1, ifRadio2, etc
        document.getElementById(el).style.display = "none";
    }
    
    // Show the current div
    
    var el = 'ifRadio' + (data); // ifRadio1, ifRadio2, etc
    document.getElementById(el).style.display = "block";
}

<div class="col-md-6">  
<label class="radio-inline">1
<input type="radio" onclick="javascript:radioCheck(this);" data=1 name="fid_7" id="showCheck1"></label>

<label class="radio-inline">2
<input type="radio" onclick="javascript:radioCheck(this);" data=2 name="fid_7" id="showCheck2"></label>

<label class="radio-inline">3
<input type="radio" onclick="javascript:radioCheck(this);" data=3 name="fid_7" id="showCheck3"></label>

<label class="radio-inline">4
<input type="radio" onclick="javascript:radioCheck(this);" data=4 name="fid_7" id="showCheck4"></label>

<label class="radio-inline">5
<input type="radio" onclick="javascript:radioCheck(this);" data=5 name="fid_7" id="showCheck5"></label>
</div>

<!--If radio 1-->
 <div id="ifRadio1" style="display:none">
Why did you rate us that way? <br><textarea type="text" id='Radio1' name='yes'></textarea><br>
What’s not working well?<br> <textarea class="form-control" type="text"></textarea>
 </div>
    

<!--If radio 2-->
 <div id="ifRadio2" style="display:none">
Why did you rate us that way? <br><textarea class="form-control" type="text" id='Radio2' name='yes'></textarea><br>
What’s not working well?<br> <textarea class="form-control" type="text"></textarea>
 </div>
          
      
<!--If radio 3-->     
 <div id="ifRadio3" style="display:none">
Why did you rate us that way? <br><textarea class="form-control" type="text" id='Radio3' name='yes'></textarea><br>
How better can we suit your needs? <br><textarea class="form-control" type="text"></textarea>
 </div>        
 
<!--If radio 4-->     
 <div id="ifRadio4" style="display:none">
Why did you rate us that way? <br><textarea class="form-control" type="text" id='ifRadio4' name='yes'></textarea><br>
Do our timing works for you? <br><textarea class="form-control" type="text"></textarea>
 </div>
    
 <!--If radio 5-->     
 <div id="ifRadio5" style="display:none">
Why did you rate us that way? <br><textarea class="form-control" type="text" id='ifRadio4' name='yes'></textarea><br>
Do our timing works for you? <br><textarea class="form-control" type="text"></textarea>
 </div> 

Since your data attr are all sequential (without skipping) you can use a simple loop to hide them all, see the comments in code I included there. I stored the element name to el only to enhance readability.