Show specific section of HTML code based on radio button?

Question

I have 2 radio buttons that will determine what HTML will be shown. When either is selected, it should show it's HTML and hide the other. How do I do this? Do I create the code and have it invisible, or do I add the code when a radio button is checked?

Answer 1

You can add code and set it to display:none before button is selected. Then you create two functions which always show one element and hide other.

 function changeContent1() { document.getElementById("show1").classList.remove("hide"); document.getElementById("show2").classList.add("hide"); } function changeContent2() { document.getElementById("show1").classList.add("hide"); document.getElementById("show2").classList.remove("hide"); } 

 .hide { display: none; } 

 <input type="radio" name="myRadios" onclick="changeContent1();" value="1" /> <input type="radio" name="myRadios" onclick="changeContent2();" value="2" /> <div id="show1" class="hide"> <p>First div</p> </div> <div id="show2" class="hide"> <p>Second div</p> </div> 

Answer 2

As others answered here is another one that should work:

<div id="one" hidden>fdsfdss</div>
<div id="two" hidden>content~~~</div>

  <input type="radio" name="gender" id="maleid" onclick="handleOne()">
  <input type="radio" name="age" id="genderid" onclick="handleTwo()">

const genderElement = document.getElementById("genderid");

function handleOne() {
  const divOne = document.getElementById("one");
  if (divOne.hasAttribute('hidden')) {
    divOne.removeAttribute('hidden');
  } else {
    divOne.setAttribute('hidden');
  }
}
function handleTwo() {
  const divTwo = document.getElementById("two");
  if (divTwo.hasAttribute('hidden')) {
    divTwo.removeAttribute('hidden');
  } else {
    divTwo.setAttribute('hidden');
  }
}

Answer 3

There are many ways to achieve the result you're after, you should show your code so that answers can address your specific issue.

There is only a need for one function, it can hide and show elements based on various attributes but the best is likely class . It can also work regardless of how many buttons and elements to show or hide that you have.

The actual method you use depends on the age of browsers you want to support, but a simple implementation is:

 // Function to show or hide div based on which radio is selected function showDiv() { [].forEach.call(document.querySelectorAll('[name=divToggle]'), function(button){ document.getElementById(button.dataset.divid).className = button.checked? '' : 'hidden'; }) } // Attach click listeners onload window.onload = function() { [].forEach.call(document.querySelectorAll('[name=divToggle]'), function(button) { button.onclick = showDiv; }) } 

 .hidden { display: none; } 

 <input type="radio" name="divToggle" data-divid="div0">Show only div 0<br> <input type="radio" name="divToggle" data-divid="div1">Show only div 1<br> <div id="div0">div 0</div> <div id="div1">div 1</div> 

Answer 4

Bind radio buttons to your application with the ng-model directive.

Radio buttons with the same ng-model can have different values, but only the selected one will be used.

<form>
  Pick a topic:
  <input type="radio" ng-model="myVar" value="dogs">Dogs
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Cars
</form>

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
  </div>
</div>

Answer 5

with JQuery

 $("#input1").click(function(){ $("#par1").css("display", "block"); $("#par2").css("display", "none"); }); $("#input2").click(function(){ $("#par2").css("display", "block"); $("#par1").css("display", "none"); }); 

where input1 and input2 id for radio button 1 and 2 and same with par1 and par2 - for paragraphs