如何在选中单选按钮时隐藏对应整个组件及所属单选按钮

你可以通过监听单选按钮的change事件捕获选中动作，具体实现步骤如下：

1. 定义基础HTML结构 #

建议把L2标签和所属单选按钮统一放在一个容器里，方便批量控制显隐，示例结构：

<!-- L1标签与所属单选按钮 -->
<label>L1：</label>
<input type="radio" name="groupL1" value="opt1" class="l1-radio"> 选项1
<input type="radio" name="groupL1" value="opt2" class="l1-radio"> 选项2
<br>
<!-- L2整体容器 -->
<div id="l2Wrapper">
  <label>L2：</label>
  <input type="radio" name="groupL2" value="opt3"> 选项3
  <input type="radio" name="groupL2" value="opt4"> 选项4
</div>

2. 绑定事件实现联动隐藏 #

给所有L1分组的单选按钮绑定change事件，只要任意一个被选中，就隐藏L2容器：

// 获取所有L1下的单选按钮
const l1Radios = document.querySelectorAll('.l1-radio');
// 获取L2容器
const l2Wrapper = document.getElementById('l2Wrapper');

// 给每个L1单选按钮绑定change事件
l1Radios.forEach(radio => {
  radio.addEventListener('change', function() {
    // 只要L1下有单选被选中，就隐藏L2
    if (this.checked) {
      l2Wrapper.style.display = 'none';
    }
  })
})

// 可选扩展：如果需要选中L2分组单选时恢复L2显示，可补充以下代码
const l2Radios = document.querySelectorAll('#l2Wrapper input[type="radio"]');
l2Radios.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.checked) {
      l2Wrapper.style.display = 'block';
      // 同时取消L1单选的选中状态（按需添加）
      l1Radios.forEach(r => r.checked = false);
    }
  })
})

核心说明 #

• 单选按钮的选中状态变化会触发change事件，比click事件更准确，只会在选项切换时触发
• 给同组单选按钮统一加类名，用querySelectorAll批量获取后循环绑定事件，不需要单独给每个按钮写监听

内容的提问来源于stack exchange，提问作者Anam Qureshi