顯示基於單選按鈕的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相同-對於段落