在隐藏当前在同一位置中选择的一个单击时，如何链接一个单击一个单击以显示不同的下拉键？

Question

如上所述，我希望我的第二个广播按钮（单个）能够在单击时显示第二个表单（下面评论），然后能够隐藏当前表单（组）。感谢任何愿意提前提供帮助的人。

<!--Using HTML, CSS, and JavaScript is preferred-->
    <div class="box3-flex">
      <h4 class="name">Name:</h4>

      <form id="form1" class="form">
        <select name="sendingfrom" class="click-op">
          <option value="group-select">arm</option>
          <option value="group-select">all</option>
        </select>
      </form>
    
      <!--This is the form I would like to link to the radio button "single"-->
      <form id="form2" class="form">
        <select name="sendingfrom" class="click-op">
          <option value="group-select">position</option>
          <option value="group-select">velocity</option>
        </select>
      </form>
    
      <input type="radio" id="group" name="group-or-single" value="group">
        <label for="group">Group</label>
    
      <input type="radio" id="single" name="group-or-single" value="single">
        <label for="single">Single</label>
    </div>
    
    <style>
      div.box3-flex {
        display: flex;
        margin-top: 30px;
      }
    
      h4.name {
        margin: 3px 0px;
      }
    
      select.click-op {
        padding: 5px 160px 5px 5px;
        margin-left: 5px;
      }
    </style>

Answer 1

如果您只是想在选择时切换下拉菜的可见性，那么这应该是一个让您入门的好地方。只需在用户单击单击单击按钮时切换可见性样式属性即可。

function single() {
  var groupForm = document.getElementById('form1');
  var singleForm = document.getElementById('form2');

  groupForm.style.visibility = 'hidden';
  singleForm.style.visibility = 'visible';
}

function group() {
  var groupForm = document.getElementById('form1');
  var singleForm = document.getElementById('form2');

  singleForm.style.visibility = 'hidden';
  groupForm.style.visibility = 'visible';
}

div.box3-flex {
  display: flex;
  margin-top: 30px;
}

h4.name {
  margin: 3px 0px;
}

select.click-op {
  padding: 5px 160px 5px 5px;
  margin-left: 5px;
}

<div class="box3-flex">
  <h4 class="name">Name:</h4>

  <form id="form1" class="form">
    <select name="sendingfrom" class="click-op">
      <option value="group-select">arm</option>
      <option value="group-select">all</option>
    </select>
  </form>

  <form id="form2" class="form">
    <select name="sendingfrom" class="click-op">
      <option value="group-select">position</option>
      <option value="group-select">velocity</option>
    </select>
  </form>

  <input type="radio" id="group" name="group-or-single" value="group" onclick="group()">
  <label for="group">Group</label>

  <input type="radio" id="single" name="group-or-single" value="single" onclick="single()">
  <label for="single">Single</label>
</div>

Answer 2

const radio = document.getEelmentById('single');
const form = document.getElementById('form2');
radio.addEventListener('click', () => {
  form.style.display = 'block';
})

默认情况下使Form2显示：无

#form2{
  display: none;
}

用户单击收音机（使用“单个”的ID）之后，将显示Form2。