本文介绍一种基于 javascript 的多级表单交互方案，解决在调查问卷中点击某一级单选按钮后正确显示下一级内容、同时自动隐藏后续无关层级的问题，确保用户反复切换选项时界面状态始终一致。

本文介绍一种基于 javascript 的多级表单交互方案，解决在调查问卷中点击某一级单选按钮后正确显示下一级内容、同时自动隐藏后续无关层级的问题，确保用户反复切换选项时界面状态始终一致。

在构建分步式调查问卷或诊断向导时，常需根据用户前一步的选择动态展示下一层级内容（如“是/否”触发新问题）。但若未对 DOM 状态进行统一管理，容易出现「回退操作失效」问题——例如重新选择第一级“否”后，第三、四级区域仍残留显示。根本原因在于：原有逻辑仅关注「显示」动作，却忽略了「清理后续层级」的必要步骤。

✅ 正确做法：每次响应都重置后续层级

关键原则是：任一交互触发时，必须显式隐藏所有依赖于当前步骤的后续容器。以下是优化后的核心逻辑结构：

function showSolution(response) {
  const solutionDiv = document.getElementById("solution");
  const additionalSolutionDiv = document.getElementById("additionalSolution");
  const additionalSolutionDiv2 = document.getElementById("additionalSolution2");
  const solutionText = document.getElementById("solutionText");
  const additionalSolutionRadio = document.getElementById("additionalSolutionRadio");

  // 【关键】先清空并隐藏所有后续层级
  additionalSolutionDiv.style.display = "none";
  additionalSolutionDiv2.style.display = "none";
  additionalSolutionRadio.innerHTML = "";

  if (response === 'yes') {
    solutionText.innerHTML = "Problem Identified: Operating System Errors<br><br>" +
      "Recommendation solution:<br><br>" +
      "Have you used the system restore points to revert to a previously stable state? For macOS, have you used Disk Utility to repair disk errors?<br>";

    // 动态注入第二级单选按钮
    additionalSolutionRadio.innerHTML = `
      <input type="radio" name="additional_solution" value="yes" required onclick="showAdditionalSolution('yes')"> Yes 
      <input type="radio" name="additional_solution" value="no" required onclick="showAdditionalSolution('no')"> No
    `;
  } else {
    solutionText.innerHTML = "No problem identified. Your device is working fine.";
  }

  solutionDiv.style.display = "block"; // 显示当前层级
}

function showAdditionalSolution(additionalSolution) {
  const additionalSolutionDiv = document.getElementById("additionalSolution");
  const additionalSolutionDiv2 = document.getElementById("additionalSolution2");
  const additionalSolutionText = document.getElementById("additionalSolutionText");

  // 【关键】进入第二级时，先隐藏第三级
  additionalSolutionDiv2.style.display = "none";

  if (additionalSolution === 'yes') {
    additionalSolutionText.innerHTML = "Additional Recommendation: <br><br>" +
      "Have you back up your data and consider reinstalling or refreshing the operating system?";
  } else {
    additionalSolutionText.innerHTML = "Try the system restore points to revert to a previously stable state. For macOS, used Disk Utility to repair disk errors.";
  }

  additionalSolutionDiv.style.display = "block";
}

function showAdditionalSolution2(additionalSolution2) {
  const additionalSolutionDiv2 = document.getElementById("additionalSolution2");
  const additionalSolutionText2 = document.getElementById("additionalSolutionText2");

  if (additionalSolution2 === 'yes') {
    additionalSolutionText2.innerHTML = "Additional Recommendation 2: <br><br>" +
      "Try to contact the technician if you still cannot solve the problem using the recommended solution.";
  } else {
    additionalSolutionText2.innerHTML = "Try to back up your data and consider reinstalling or refreshing the operating system.";
  }

  additionalSolutionDiv2.style.display = "block";
}

⚠️ 注意事项与最佳实践

• 避免内联 onclick 滥用：建议改用 addEventListener 绑定事件，提升可维护性与可测试性；
• 命名一致性：确保各层级 name 属性不冲突（如 response、additional_solution 已区分，无需修改）；
• 无障碍支持：为每个 <input type="radio"> 添加配套 <label></label> 并关联 for 属性（原代码中缺失 id，需补全）；
• CSS 优先隐藏：推荐使用类名（如 .hidden { display: none; }）替代内联 style="display:none"，便于主题切换与调试；
• 扩展性设计：若层级超过 4 级，建议将状态管理抽象为状态机或使用 data-step 属性驱动，避免硬编码 DOM ID。

通过严格遵循「响应即重置」策略，即可实现任意层级间的干净切换，保障用户体验的一致性与逻辑的健壮性。