如何使用原生JavaScript根据选中选项切换display:none状态显示隐藏div

现有代码问题 #

• document.getElementById()未传入目标元素的id值，无法定位到需要控制显隐的skillMaster容器
• 没有判断单选框的选中状态，也未正确调用classList的类操作方法，无法完成类名切换

修复后可用代码 #

JavaScript代码 #

function showDiv() {
  // 识别当前选中的单选框值
  const isSelectedYes = document.querySelector('input[name="question"]:checked').value === '1';
  // 定位目标容器
  const targetDiv = document.getElementById('skillMaster');
  // 切换显隐类（适配你使用的bootstrap类规则）
  targetDiv.classList.toggle('d-none', !isSelectedYes);
  targetDiv.classList.toggle('d-block', isSelectedYes);
}

HTML代码无需修改，原有绑定逻辑可正常运行 #

直接用上述JS替换现有代码即可实现需求：选中Yes时显示skillMaster容器，选中No时自动隐藏。

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