Make Radio Button Show/Hide Input Form

radio button javascript onclick=show hide textbox
bootstrap radio button show/hide div
onclick radio button show/hide div jquery
how to show/hide divs based on radio button selection using javascript
multiple radio button show/hide div
radio button checked show div css
show div on radio button select javascript
show hide div on click of radio button in angular 8

I am coding a site and I would like to know how to make my radio buttons show / hide input fields.

The site I'm using ONLY allows me to edit the CSS and JavaScript (no jQuery) so I can't change the HTML but there are IDs on the radio buttons and input fields.

Essentially I am working on a product page and want to only show one dropdown when someone only chooses to buy one product with the others hidden. Then show two dropdowns if they select the buy two radio button with the 3rd and 4th hidden. Then show three dropdowns if they select the buy three radio button with the 4th hidden. Then if they select four show them all.

Codepen

function hideSelector() {
  var seltwo = document.getElementById("second");

  seltwo.addClass("hidden");
};

document.getElementById("one").addEventListener("click", hideSelector);
.visible {
  display: block;
}

.hidden {
  display: none;
}
Buy One <input type="radio" name="yesno" id="one"> Buy Two <input type="radio" name="yesno" id="two"> Buy Three <input type="radio" name="yesno" id="three"> Buy Four <input type="radio" name="yesno" id="four">

<br>
<select id="first">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="second">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="third">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="fourth">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

See below. The radio button can be changed, number of select boxes will be adjusted. Documentation in the JS code.

function hideSelector() {
  // Put all radio buttons with the same name in an array
  const radios = [...document.getElementsByName("yesno")];

  // Check which radio button is selected and save the index
  let selectedRadio = 0,
    i = 0;
  for (i = 0; i < radios.length; i++) {
    if (radios[i].checked) selectedRadio = i + 1;
  }

  // Set all select boxes to display: block;
  const selectBoxes = [...document.getElementsByTagName("select")];
  selectBoxes.map( selectBox => selectBox.style.display = "block");
  
  // Hide as many as needed
  const toBeHidden = radios.length - selectedRadio;
  for (i = 0; i < toBeHidden; i++) {
    selectBoxes[i].style.display = "none";
  }
}
// Add an event listener for all radio buttons with the same name
const radios = [...document.getElementsByName("yesno")];
radios.forEach(function(el) {
  el.addEventListener("click", hideSelector);
});
.hidden {
  display: none;
}

select {
  display: block;
  margin-top: 1rem;
}
Buy One <input type="radio" name="yesno" id="one"> Buy Two <input type="radio" name="yesno" id="two"> Buy Three <input type="radio" name="yesno" id="three"> Buy Four <input type="radio" name="yesno" id="four">
<div>
  <select id="first">
    <option value="chevy">Chevy</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>
  <select id="second">
    <option value="chevy">Chevy</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>
  <select id="third">
    <option value="chevy">Chevy</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>
  <select id="fourth">
    <option value="chevy">Chevy</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </select>
</div>

HTML <input type="hidden">, How do you show and hide input fields based on radio button selection? How to Show/Hide Div On Radio Button Selected Using jQuery. Below is the example to show/hide div on select of the radio button. You have to add script, HTML and also some style CSS to hide div’s at the start. Radio button <strong>"One"< / strong> selected. Radio button <strong>"Two"< / strong> selected.

In the following demo: - each radio listens for the change event - collects all of the form controls into two NodeLists, - runs through a for loop to add .visible to each <select> until the checked radio is found, - then it will remove .visible from the remaining <selects>

Also all <select>s are hidden by CSS


Demo

/*
Collect all radios in a NodeList
Collect all selects in a NodeList
*/
var radios = document.querySelectorAll('[type=radio]');
var selects = document.querySelectorAll('select');

/*
On each radio, register it to the change event
When a radio is selected by user and then loses focus,
the callback function buyN() is called
*/
radios.forEach((rad, idx) => {
  rad.addEventListener('change', function(e) {
    buyN(e, radios, selects);
  });
});

/*
Callback function pass Event Object, and 2 NodeLists
The first loop will add .visible to each select.
It is stopped after it finds the checked radio.
The second loop then starts and removes .visible for the
remaining selects.
*/
function buyN(e, radios, selects) {
  var chk;
  for (chk = 0; chk < radios.length; chk++) {
    selects[chk].classList.add('visible');
    if (radios[chk].checked) {
      break;
    }
  }
  var hide = chk + 1;
  for (hide; hide < radios.length; hide++) {
    selects[hide].classList.remove('visible');
  }
}
.visible {
  display: block;
}

select {
  display: none;
}
Buy One <input type="radio" name="yesno" id="one"> Buy Two <input type="radio" name="yesno" id="two"> Buy Three <input type="radio" name="yesno" id="three"> Buy Four <input type="radio" name="yesno" id="four">

<br>
<select id="first">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="second">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="third">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="fourth">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

only stores those database records that need to be updated when submitting the form. You can simply use the jQuery show () and hide () methods to show and hide the div elements based on the selection of radio buttons. The div boxes in the following example are hidden by default using the CSS display property which value is set to none.

addClass() is a jQuery method.

Since you're not using jQuery, use classList.add() instead.

function hideSelector() {
  var seltwo = document.getElementById("second");

  seltwo.classList.add("hidden");
};

document.getElementById("one").addEventListener("click", hideSelector);
.visible {
  display: block;
}

.hidden {
  display: none;
}
Buy One <input type="radio" name="yesno" id="one"> Buy Two <input type="radio" name="yesno" id="two"> Buy Three <input type="radio" name="yesno" id="three"> Buy Four <input type="radio" name="yesno" id="four">

<br>
<select id="first">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="second">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="third">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>
<br>
<select id="fourth">
  <option value="chevy">Chevy</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
</select>

Exposing Additional Form Fields via Checked Radio Buttons .reveal-if-active, input[type="checkbox"]:checked ~ .reveal-if-active { opacity: 1; We could do the hide/showing through JavaScript as well, but CSS is quite well suited for it. Deleting Radio Buttons in Excel. You can easily delete a single radio button in Excel by selecting it and pressing the delete key. To select a radio button, you need to hold the Control key and the press the left button of the mouse. If you want to delete multiple radio buttons: Hold the Control key and select all the ones that you want to delete.

Answer: Use the jQuery show() and hide() methods​​ You can simply use the jQuery show() and hide() methods to show and hide the div elements based on the selection of radio buttons. The div boxes in the following example are hidden by default using the CSS display property which value is set to none . The <input type="radio"> defines a radio button. Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time. Note: The radio group must have share the same name (the value of the name attribute) to be treated as a

Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="​yesCheck"> No <input type="radio" What can we do to accommodate you? This may seem an odd request but I'd like to be able to make radio buttons invisible on a form. One can apply images to the labels and this brings them close to a button function on mobiles. I'm lacking a bit of CSS knowledge to inject here:.form-radio is the class I believe I have to change (as per firebug)

hide() methods: This method is used to hiding the syntax or the element of html that you want to hide. Syntax: html >. < head >. < title >. Show and Hide div elements using radio buttons. </ title >. < script src input type = "radio" name = "​colorRadio". value = "C" How to create a jQuery plugin with methods? How to scroll  The HTML <form> element defines a form that is used to collect user input: An HTML form contains form elements. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more. The <input> element is the most important form element. The <input> element can be displayed in several ways

Comments
  • simply use seltwo.style.display ="none"; instead of seltwo.addClass("hidden");
  • Thank you! Works great