显示基于单选按钮的HTML代码的特定部分？

Question

我有2个单选按钮，它们将确定将显示什么HTML。 选择其中一个时，它应显示为HTML并隐藏另一个。 我该怎么做呢？ 是否创建代码并使代码不可见，还是在选中单选按钮时添加代码？

Answer 1

您可以添加代码并将其设置为display:none选择按钮之前display:none 。 然后，创建两个函数，它们始终显示一个元素，而隐藏其他元素。

 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

正如其他人在这里回答的那样，应该是另一个可行的方法：

<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

有许多方法可以达到您想要的结果，您应该显示代码，以便答案可以解决您的特定问题。

只需要一个函数，它可以基于各种属性隐藏和显示元素，但是最好的是class 。 无论您要显示或隐藏多少个按钮和元素，它也可以工作。

您使用的实际方法取决于您要支持的浏览器的年龄，但是一个简单的实现是：

 // 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

使用ng-model指令将单选按钮绑定到您的应用程序。

具有相同ng-model的单选按钮可以具有不同的值，但仅会使用所选的按钮。

<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

与JQuery

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

其中input1和input2 id为单选按钮1和2，与par1和par2相同-对于段落