基于多个单选按钮选中状态显示指定div的问题排查

嘿，我来帮你搞定这个问题！这种根据多个单选按钮的选中状态控制元素显示的需求很常见，大概率是在单选按钮结构、事件监听或者判断逻辑这几个环节出了小疏漏。咱们一步步来排查和解决：

第一步：确认单选按钮的基础结构是否正确 #

首先要保证你的单选按钮是按组划分的，每个组的name属性一致，value属性完全匹配你要判断的字符串（注意大小写！比如"symptomatic"和"Symptomatic"是完全不同的）。示例结构应该是这样的：

<!-- div0 单选组 -->
<label>
  <input type="radio" name="div0" value="symptomatic"> Symptomatic
</label>
<label>
  <input type="radio" name="div0" value="asymptomatic"> Asymptomatic
</label>

<!-- div1 单选组 -->
<label>
  <input type="radio" name="div1" value="negative"> Negative
</label>
<label>
  <input type="radio" name="div1" value="positive"> Positive
</label>

<!-- div2 单选组 -->
<label>
  <input type="radio" name="div2" value="normal"> Normal
</label>
<label>
  <input type="radio" name="div2" value="abnormal"> Abnormal
</label>

<!-- 要显示的div9 -->
<div id="div9" style="display: none;">符合条件的内容</div>

第二步：添加事件监听与判断逻辑 #

接下来需要给所有单选按钮绑定change事件，每次选中状态变化时就检查三个组的选中值是否符合要求。同时页面加载完成后也要触发一次检查，避免初始状态下符合条件但不显示的情况：

// 获取所有相关的单选按钮
const radioButtons = document.querySelectorAll('input[name="div0"], input[name="div1"], input[name="div2"]');
// 获取目标div9
const div9 = document.getElementById('div9');

// 定义检查并控制显示的函数
function checkAndDisplayDiv9() {
  // 获取每个组的选中值（用可选链避免未选中时报错）
  const div0Value = document.querySelector('input[name="div0"]:checked')?.value;
  const div1Value = document.querySelector('input[name="div1"]:checked')?.value;
  const div2Value = document.querySelector('input[name="div2"]:checked')?.value;

  // 判断是否符合所有条件
  if (div0Value === 'symptomatic' && div1Value === 'negative' && div2Value === 'normal') {
    div9.style.display = 'block'; // 显示div9
  } else {
    div9.style.display = 'none'; // 隐藏div9
  }
}

// 给每个单选按钮绑定change事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', checkAndDisplayDiv9);
});

// 页面加载完成后触发一次检查
window.addEventListener('load', checkAndDisplayDiv9);

常见的坑要注意 #

• 大小写问题：确保你判断的value和单选按钮的value完全一致（比如不要把"symptomatic"写成"Symptomatic"）
• 单选组的name：每个组的name必须相同，否则单选按钮不会互斥，也无法正确获取选中值
• 初始状态：如果页面加载时已经有默认选中的单选按钮，一定要触发一次检查函数，否则div9不会自动显示
• 其他代码干扰：检查是否有其他JS代码修改了div9的display属性，或者阻止了事件触发

你可以对照上面的步骤检查自己的代码，应该就能解决问题啦！

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