How to Show and Hide Input Fields Based on Radio Button Selection

How To Show And Hide Input Fields Based On Radio Button Selection

Replace all instances of visibility style to display

display:none //to hide
display:block //to show

Here's updated jsfiddle: http://jsfiddle.net/QAaHP/16/

You can do it using Mootools or jQuery functions to slide up/down but if you don't need animation effect it's probably too much for what you need.

CSS display is a faster and simpler approach.

Show and hide input fields depending on which Radio Button you select

You need an event listener for that because the function isn't called just by declaration. You could do that inline with:

<input type="radio" name="verlegeart" id="adjustableHeight"  onclick="adjustableHeightCheck()">

But this isn't good practice – HTML, CSS and JavaScript should be separate:

const adjustableHeight = document.querySelector('#adjustableHeight');

adjustableHeight.addEventListener('change', adjustableHeightCheck);

You also forgot to change the label back in the else statement:

document.getElementById("height").innerHTML = "Höhe";

Working example: (CSS also separate ;)

const fixHeight = document.querySelector('#fixHeight');
const adjustableHeight = document.querySelector('#adjustableHeight');

fixHeight.addEventListener('change', adjustableHeightCheck);
adjustableHeight.addEventListener('change', adjustableHeightCheck);

function adjustableHeightCheck() {
  if (document.getElementById("adjustableHeight").checked) {
    document.getElementById("max-height").style.display = "block";
    document.getElementById("height").innerHTML = "Niedrigste Höhe in mm";
  } else {
    document.getElementById("max-height").style.display = "none";
    document.getElementById("height").innerHTML = "Höhe";
  }
}

#max-height {
  display: none;
}

<label>Fix Höhe
  <input type="radio" name="verlegeart" id="fixHeight">
</label>

<label>Verstellbare Höhe
  <input type="radio" name="verlegeart" id="adjustableHeight">
</label>

<br>

<label>
  <p id="height">Höhe</p>
  <input type="number">
</label>

<div id="max-height">
  <label>
    <p>Höchste Höhe in mm</p>
    <input type="number">
  </label>
</div>

How to hide and unhide form fields based on a radio button?

EDIT: I originally misunderstood the question and have now adjusted my answer.

Additionally, I have also included a function that will hide your input if another radio button is clicked.

See the snippet below:

//your checkbox
var checkbox = document.getElementById("type_computer");

//your div
var inputDiv = document.getElementById("nextSetOfComputerOptions");

//function that will show hidden inputs when clicked
function addmentor() {
  if (checkbox.checked = true) {
    inputDiv.style.display = "block";
  }
}

//function that will hide the inputs when another checkbox is clicked
function hideInputDiv() {
  inputDiv.style.display = "none";
}

<input type="radio" name="type" id="type_computer" value="Computer" onChange="addmentor();" ">Add Mentor</input>
<input type="radio" name="type" onClick="hideInputDiv();">Other radio input</input>
<div id="nextSetOfComputerOptions" style="display: none;">
  <input placeholder="PC"></input>
  <input placeholder="Mac"></input>
</div>

Show/hide form fields based on radio button

The following doesn't assume that the user has chosen the selects in a particular order, and will evaluate the fields to be shown regardless of the order they were selected.

I believe there are 3 combinations that you need to account for:

(if) requestType == 'Team' && sessionType == 'Live Session'
(elseif) requestType == 'Team'
(else) requestType !== 'Team'

Try this and see if it works for you.

$(document).ready(function () {
    $('input[name=requestType]').click(function() {
         toggleTeamsFields();
    });

    $('input[name=sessionType]').click(function(){
         toggleTeamsFields();
    });
});

function toggleTeamsFields(){

    if($('input[name=requestType]').value == 'Team' && if($('input[name=sessionType]').value == 'Live Session'){

        $(".total").show();
        $(".teamname").show();
        $(".one").show();
        $(".two").show();
        $(".three").show();
        $(".four").show();
        $(".five").show();

    }elseif($('input[name=requestType]').value == 'Team'){

        $(".teams").hide();
        $(".teamname").show();

    }else{

        $(".teams").hide();

    } 
}

you could also use a case-switch statement to do the same but when my statements are no bigger than if/elseif/else I usually don't reach for the case-switch.

Hide and show element based on radio button selection?

The issue here is you are setting value as "true" and "false" as string type. So, in ngIf the string is not empty. Hence, it is getting shown always. Use binding syntax like below:

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<div class="form-group col-md-6">
  <div class="d-flex mb-2">
    <div>Do you have massage certificate ?</div>
    <div class="form-check-radio m-0">
      <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            [value]="true" >
            Yes
            <span class="form-check-sign"></span>
            </label>
    </div>
    <div class="form-check-radio m-0">
      <label class="form-check-label">
            <input 
            class="form-check-input" 
            type="radio" 
            name="option" 
            [(ngModel)]="has_cert" 
            [value]="false" >
            No
            <span class="form-check-sign"></span>
            </label>
    </div>
  </div>
  <div *ngIf="has_cert">
    <input type="file" class="form-control-file custom" id="cv">
  </div>
</div>

Show/Hide input fields based on double radio button selection

Use function onclick #remoteSession then check if Team is checked if yes hide/show whatever you want...

$(document).ready(function () { $('input[name=requestType]').click(function() {  if(this.value == 'Team')  {   $(".total").show();   $(".teamname").show();   $(".one").show();   $(".two").show();   $(".three").show();   $(".four").show();   $(".five").show();  }  else  {   $(".teams").hide();              } });  $('input[name=sessionType]').click(function() {
  if($('input[name=requestType]:checked').val()=='Team' && $('input[name=sessionType]:checked').val()=='Remote Session')  {   $(".teams").hide();    $(".teamname").show();      }else $('input[name=requestType]').click();  });   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form id="form"> <div class="container form"> <div class="form-group row">   <label for="requestType" class="col-form-label">Request Type:</label>    <label for="singleUser" class="radio-inline"><input id="singleUser" type="radio" name="requestType" value="Single User" checked>Single User</label>  <label for="teamSelection" class="radio-inline"><input id="teamSelection" type="radio" name="requestType" value="Team">Team</label>    <div class="help-block with-errors"></div> </div>  <div class="form-group row">   <label for="sessionType" class="col-form-label">Session Type:</label>    <label for="liveSession" class="radio-inline"><input id="liveSession" type="radio" name="sessionType" value="Live Session" checked>Live Session</label>  <label for="remoteSession" class="radio-inline"><input id="remoteSession" type="radio" name="sessionType" value="Remote Session">Remote Session</label>  <div class="help-block with-errors"></div> </div>
 <div class="form-group row requester req">   <label for="requesterName" class="col-form-label">Requester Name:</label>    <input class="form-control" name="requesterName" type="text" id="requesterName" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: Jane Doe" required/>  <div class="help-block with-errors"></div> </div>

 <div class="form-group row teamname teams">   <label for="teamName" class="col-form-label">Team Name:</label>    <input class="form-control" name="teamName" type="text" id="teamName" data-minlength="2" data-error="Please enter a valid team name." placeholder="Ex: PortalHelp Team" required/>    <div class="help-block with-errors"></div> </div>
 <div class="form-group row teams total">     <label for="totalUsers" class="col-form-label">Number of Attendees:</label>        <select class="form-control" id="totalUsers">          <option value="Five" selected>5</option>          <option value="Six">6</option>          <option value="Seven">7</option>          <option value="Eight">8</option>          <option value="Nine">9</option>          <option value="Ten">10</option>        </select>        <div class="help-block with-errors"></div>    </div>
    <div class="form-group row one teams">        <label for="oneUser" class="col-form-label">Names of Attendees:</label>        <input class="form-control" name="oneUser" type="text" id="oneUser" data-minlength="2" data-error="Please enter a valid name." placeholder="Ex: John Smith" required/>        <div class="help-block with-errors"></div>    </div>
      <div class="form-group row two teams">        <input class="form-control" name="twoUsers" type="text" id="twoUsers" data-minlength="2" data-error="Please enter a valid name." required/>        <div class="help-block with-errors"></div>   </div>
      <div class="form-group row three teams">          <input class="form-control" name="threeUsers" type="text" id="threeUsers" data-minlength="2" data-error="Please enter a valid name." required/>          <div class="help-block with-errors"></div>      </div>
      <div class="form-group row four teams">          <input class="form-control" name="fourUsers" type="text" id="fourUsers" data-minlength="2" data-error="Please enter a valid name." required/>          <div class="help-block with-errors"></div>      </div>
      <div class="form-group row five teams">          <input class="form-control" name="fiveUsers" type="text" id="fiveUsers" data-minlength="2" data-error="Please enter a valid name." required/>          <div class="help-block with-errors"></div>      </div>
      <div class="form-group row six teams teams1">          <input class="form-control" name="sixUsers" type="text" id="sixUsers" data-minlength="2" data-error="Please enter a valid name." required/>          <div class="help-block with-errors"></div>      </div>
      <div class="form-group row seven teams teams1">          <input class="form-control" name="sevenUsers" type="text" id="sevenUsers" data-minlength="2" data-error="Please enter a valid name." required/>          <div class="help-block with-errors"></div>      </div>
      <div class="form-group row eight teams teams1">          <input class="form-control" name="eightUsers" type="text" id="eightUsers" data-minlength="2" data-error="Please enter a valid name." required/>          <div class="help-block with-errors"></div>      </div>
   <div class="form-group row nine teams teams1">          <input class="form-control" name="nineUsers" type="text" id="nineUsers" data-minlength="2" data-error="Please enter a valid name." required/>          <div class="help-block with-errors"></div>      </div>
      <div class="form-group row ten teams teams1">          <input class="form-control" name="tenUsers" type="text" id="tenUsers" data-minlength="2" data-error="Please enter a valid name." required/>          <div class="help-block with-errors"></div>      </div>
      <div class="form-group row">          <button type="button" name="singlebutton" class="btn btn-success" id="submit">Submit</button>          <button type="reset" name="cancelbutton" class="btn btn-warning" id="cancel" onclick="window.location.href='/TrainingResourceCenter/O365Training/Pages/Training.aspx'">Cancel</button>      </div>   </div></form> Run code snippet

how to show and hide field based on radio button

Here is basic example by using javascript:

Radio Buttons:

<input type="radio" name="HSC" value="Yes" onChange="getValue(this)">Yes<br> 
<input type="radio" name="HSC" value="No" onChange="getValue(this)"> No<br>

Here, i am using onchange() event for value changes.

Your Div:

<div id="yourfield" style="display:none;"> 
   Hide Me: Place your all four fields here
   student_date_of_graduate , 
   average , 
   schoolname and 
   specialty
</div>

You need a identifier id="yourfield" for perform changes like show and hide the specific div.

Script:

<script type="text/javascript">
function getValue(x) {
  if(x.value == 'No'){
    document.getElementById("yourfield").style.display = 'none'; // you need a identifier for changes
  }
  else{
    document.getElementById("yourfield").style.display = 'block';  // you need a identifier for changes
  }
}
</script>

Simple javascript function, which only use to show or hide your div according to radio button value.

How to Show and Hide Input Fields Based on Radio Button Selection