如何询问多个选定的问题单选按钮/复选框

Question

应该有三个复选框/单选按钮。当我点击其中一个时，其他的应该变灰。例如，当我点击某人时，我必须做出不同的选择。当我单击其他时，会出现不同的选择。我怎样才能做到这一点。例如，当我单击第一个单选按钮时。底部应该有一个文件上传按钮。当您单击第二个单选按钮时，应该有用于书写的文本。我怎样才能用 html css 做到这一点？

底部应该有一个文件上传按钮。当您单击第二个单选按钮时，应该有用于书写的文本。我怎样才能用 html css 做到这一点？

Answer 1

仅使用 HTML 和 CSS 来完成此操作会很棘手，但使用 JavaScript 来完成此操作会使任务变得更加简单。单击特定单选按钮选项后，可以使用 HTML、CSS 和 JavaScript 创建所需的结果，以隐藏和显示其余内容。

在下面的代码片段中，JavaScript 正在侦听单选按钮是否已被选中，然后显示所选单选按钮的内容，同时首先确保其他内容被隐藏。

function Display(option) {
  var allContents = document.getElementsByClassName('content');
  for (var i = 0; i < allContents.length; i++) {
    allContents[i].style.display = 'none';
  }
  
  var selectedContent = document.getElementById(option + 'Content');
  if (selectedContent) {
    selectedContent.style.display = 'block';
  }
}

.content {
  margin-top: 10px;
}

<div>
  <input type="radio" id="radio1" name="Option 1" value="option1" onchange="Display('option1')"> 
  <label for="radio1">Option 1</label><br>
  
  <input type="radio" id="radio2" name="Option 2" value="option2" onchange="Display('option2')"> 
  <label for="radio2">Option 2</label><br>
  
  <input type="radio" id="radio3" name="Option 3" value="option3" onchange="Display('option3')"> 
  <label for="radio3">Option 3</label><br>
</div>

<div id="option1Content" class="content" style="display: none;">
  <p>Option 1 has been selected. Here is a file upload button:</p>
  <input type="file">
</div>

<div id="option2Content" class="content" style="display: none;">
  <p>Option 2 has been selected. Here is a text area for writing:</p>
  <textarea></textarea>
</div>

<div id="option3Content" class="content" style="display: none;">
  <p>Option 3 has been selected. Here is some placeholder content.</p>
  <img src="https://flif.info/example-images/fish.png" alt="Girl in a jacket" width="300" height="200">
</div>

您的问题很难理解，因此如果您有任何疑问，请通过评论或编辑您的问题让我知道，以便我进一步帮助您。