CODEWITHSUNDEEP
javascripthtmlcss
Mah Sh
Mah Sh

Reputation: 13

How to hide and Show input in html when a radio button is checked?

I have gender radio button for "male" and "female" options. I have also 2 divs: first for a "husband" input (to get if husband is alive or not) and the other one for "wife" input (to get if wife is alive or not).

I want to hide the husband input and show wife input when radio male is checked and I want to hide the wife input and show husband input when radio female is checked

I've tried to get the value of the radio selected but it didn't work. also tried to handle it by .checked operator that didn't word also. can you please tell what am I missing?

here is the code:

function toggle_visibility() {
  var s = document.getElementById("divhus");
  var c = document.getElementById("divwife");
  var x = document.getElementById("gender").value;
  if (x == "m") {
    c.style.display = "block";
    s.style.display = "none";
  } else if (x == "f") {
    c.style.display = "none";
    s.style.display = "block";
  }
}
male <input id="gender" type="radio" name="gender" value="m" checked="checked" onclick="toggle_visibility()"> female <input id="gender" type="radio" name="gender" value="f">
<div id="divwife">
  wife: alive <input type="radio" name="wife" value="true"> dead <input id="hus1" type="radio" name="wife" value="false" checked="checked">
</div>
<div id="divhus" style="display:none">
  husband: alive <input type="radio" name="husband" value="true"> dead <input id="hus1" type="radio" name="husband" value="false" checked="checked">
</div>

Thanks for support, and sorry for stupid question but I am a beginner.

Upvotes: 0

Views: 597

Answers (3)

lwohlhart
lwohlhart

Reputation: 1932

You are facing two issues:

  1. there's no onclick-listener on your female - tag
  2. you're not really retrieving the checked element, but just the first element with id="gender" ( don't use the same id for both tags, ids must be unique per-document at all times )

ad 1) just add the listener

ad 2) use a query-selector targeting the checked input e.g. below

function toggle_visibility() {
   var s = document.getElementById("divhus");
   var c = document.getElementById("divwife");
   var x = document.querySelector('input[name = "gender"]:checked').value;
   if (x == "m") {
     c.style.display = "block";
     s.style.display = "none";
   }else if(x == "f"){
     c.style.display = "none";
     s.style.display = "block";
   }
}
male <input id="gender_m" type="radio" name="gender" value="m" checked="checked"  onclick="toggle_visibility()">
female <input id="gender_f" type="radio" name="gender" value="f"  onclick="toggle_visibility()">
<div id="divwife" >
wife:   alive <input type="radio" name="wife" value="true">
          dead <input id="hus1" type="radio" name="wife" value="false" checked="checked">
</div>
<div id="divhus" style="display:none">
husband:   alive <input type="radio" name="husband" value="true">
          dead <input id="hus1" type="radio" name="husband" value="false" checked="checked">
</div>

Upvotes: 0

connexo
connexo

Reputation: 56754

Use a delegate change listener on an element that is an ancestor of both radio buttons:

const delegate = document.getElementById('malefemalecontainer') // get the delegate element (ancestor);
delegate.addEventListener( // add an event listener to the delegate
    'change', // listening for change event bubbling up
    function() { // function that handles the change when it occurs
      const isMale = delegate.querySelector('input:checked').value === 'm'; // test if male is checked
      document.getElementById('divwife').hidden = isMale; // if isMale, hide wife
      document.getElementById('divhus').hidden = !isMale; // if not isMale, hide husband
    }
);
<div id="malefemalecontainer">
  <label>male <input type="radio" name="gender" value="m"></label> 
  <label>female <input type="radio" name="gender" value="f"></label>
</div>
<div id="divwife" hidden>
  wife: 
  <label>alive <input type="radio" name="wife" value="true"></label>
  <label>dead <input type="radio" name="wife" value="false" checked="checked"></label>
</div>
<div id="divhus" hidden>
  husband: 
  <label>alive <input type="radio" name="husband" value="true"></label>
  <label>dead <input type="radio" name="husband" value="false" checked="checked"></label>
</div>

Upvotes: 1

dariowskii
dariowskii

Reputation: 315

You can't ahave same id for multiple elements in html. You need to call the function also when you click on other radio. Try to change like this:

<input type="radio" id="gender_m" onclick="toggle_function()"... >
<input type="radio" id="gender_f" onclick="toggle_function()"... >

And change the function like this:

function toggle_visibility() {
  var s = document.getElementById("divhus");
  var c = document.getElementById("divwife");
  var x = document.getElementById("gender_m");
  var y = document.getElementById("gender_f");
  if (x.checked) {
    c.style.display = "block";
    s.style.display = "none";
  }
  if (y.checked) {
    c.style.display = "none";
    s.style.display = "block";
  }
}

Upvotes: 0

Related Questions