Question

我有2个单选按钮，用于确定将显示的HTML。选择其中任何一个时，它应该显示它的HTML并隐藏另一个。我该怎么做呢？我是否创建了代码并使其不可见，或者在选中单选按钮时添加代码？

Answer 1

您可以在选择按钮之前添加代码并将其设置为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 。无论显示或隐藏多少按钮和元素，它都可以工作。

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

＆＃13;

// 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;
  })
}

＆＃13;

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

根据单选按钮显示HTML代码的特定部分？

5 个答案: