如何实现Radio Button组联动显示？首个组输出后展示后两组

嘿，我来帮你搞定这个单选框的显示控制需求！

核心思路很简单：默认把后两组单选框的容器设为隐藏状态，然后给第一组单选按钮绑定一个选择事件，当用户选中符合要求的选项时，再把后两组显示出来，否则继续隐藏。

我基于你的现有代码，整理了一个完整的可运行示例，你可以直接参考：

<div class="row">
  <!-- 第一组单选按钮 -->
  <div id="group1">
    <p>请选择第一组选项：</p>
    <label>
      <input type="radio" name="group1" value="0" onchange="toggleGroups(this.value)"> 不符合要求
    </label>
    <label>
      <input type="radio" name="group1" value="1" onchange="toggleGroups(this.value)"> 符合要求
    </label>
  </div>

  <!-- 第二组单选按钮（默认隐藏） -->
  <div id="group2" style="display: none; margin-top: 1rem;">
    <p>第二组选项：</p>
    <label>
      <input type="radio" name="group2" value="a"> 选项A
    </label>
    <label>
      <input type="radio" name="group2" value="b"> 选项B
    </label>
  </div>

  <!-- 第三组单选按钮（默认隐藏） -->
  <div id="group3" style="display: none; margin-top: 1rem;">
    <p>第三组选项：</p>
    <label>
      <input type="radio" name="group3" value="x"> 选项X
    </label>
    <label>
      <input type="radio" name="group3" value="y"> 选项Y
    </label>
  </div>
</div>

<script type="text/javascript">
function toggleGroups(selectedValue) {
  // 这里的判断条件你可以根据自己的需求修改，比如改成特定的value值
  if (selectedValue === "1") {
    // 符合要求，显示后两组
    document.getElementById('group2').style.display = 'block';
    document.getElementById('group3').style.display = 'block';
  } else {
    // 不符合要求，隐藏后两组
    document.getElementById('group2').style.display = 'none';
    document.getElementById('group3').style.display = 'none';
  }
}
</script>

关键部分说明： #

• 我给后两组单选框分别套了带ID的容器（group2和group3），并通过style="display: none;"默认隐藏它们。
• 第一组的每个单选按钮都绑定了onchange事件，触发toggleGroups函数，并把当前选中的值传进去。
• 在toggleGroups函数里，你可以自定义判断条件（比如把selectedValue === "1"改成你实际需要的判断逻辑），满足条件时就显示后两组，否则隐藏。

如果你不想用内联的onchange，也可以用事件监听的方式绑定，代码结构更清晰，比如把JS改成这样：

// 等DOM加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const group1Radios = document.querySelectorAll('input[name="group1"]');
  group1Radios.forEach(radio => {
    radio.addEventListener('change', function() {
      if (this.value === "1") {
        document.getElementById('group2').style.display = 'block';
        document.getElementById('group3').style.display = 'block';
      } else {
        document.getElementById('group2').style.display = 'none';
        document.getElementById('group3').style.display = 'none';
      }
    });
  });
});

内容的提问来源于stack exchange，提问作者R. Kaushal