如何创建带条件分支的多步骤表单？

核心实现思路 #

通过CSS控制表单区域的显示/隐藏，结合JavaScript判断用户的单选选择，实现分支跳转逻辑。

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .form-section {
      display: none;
    }
    .form-section.current {
      display: block;
    }
    .form-button {
      margin-top: 20px;
    }
    label {
      display: block;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <form>
    <!-- 第一步：选择是否喜欢水果 -->
    <div class="form-section current" id="section1">
      <h2>你喜欢水果吗？</h2>
      <label>
        <input type="radio" name="likeFruits" value="yes"> 是
      </label>
      <label>
        <input type="radio" name="likeFruits" value="no"> 否
      </label>
      <div class="form-button">
        <button type="button" onclick="nextSection()">下一步</button>
      </div>
    </div>
    <!-- 第二步：喜欢水果时选择具体种类 -->
    <div class="form-section" id="section2">
      <h2>你喜欢哪种水果？</h2>
      <label>
        <input type="radio" name="favoriteFruit" value="apple"> 苹果
      </label>
      <label>
        <input type="radio" name="favoriteFruit" value="grape"> 葡萄
      </label>
      <div class="form-button">
        <button type="button" onclick="prevSection()">返回</button>
        <button type="button" onclick="nextSection()">下一步</button>
      </div>
    </div>
    <!-- 第三步：不喜欢水果时填写原因 -->
    <div class="form-section" id="section3">
      <h2>你为什么不喜欢水果？</h2>
      <label>
        <input type="text" name="reason" placeholder="请输入原因">
      </label>
      <div class="form-button">
        <button type="button" onclick="prevSection()">返回</button>
        <button type="submit">提交</button>
      </div>
    </div>
  </form>

  <script>
    function nextSection() {
      const currentSection = document.querySelector('.form-section.current');
      
      // 处理第一步的分支逻辑
      if (currentSection.id === 'section1') {
        const selectedOption = document.querySelector('input[name="likeFruits"]:checked');
        if (!selectedOption) {
          alert('请先选择一个选项');
          return;
        }
        
        currentSection.classList.remove('current');
        // 根据选择显示对应步骤
        selectedOption.value === 'yes' 
          ? document.getElementById('section2').classList.add('current')
          : document.getElementById('section3').classList.add('current');
      } 
      // 处理第二步的提交逻辑
      else if (currentSection.id === 'section2') {
        const selectedFruit = document.querySelector('input[name="favoriteFruit"]:checked');
        if (!selectedFruit) {
          alert('请选择喜欢的水果');
          return;
        }
        alert(`选择确认：${selectedFruit.nextSibling.textContent.trim()}，表单提交成功`);
        // 如需实际提交表单，可取消注释下方代码
        // document.querySelector('form').submit();
      }
    }

    function prevSection() {
      const currentSection = document.querySelector('.form-section.current');
      currentSection.classList.remove('current');
      // 所有步骤返回第一步
      document.getElementById('section1').classList.add('current');
    }

    // 处理第三步的表单提交
    document.querySelector('form').addEventListener('submit', function(e) {
      e.preventDefault();
      const reason = document.querySelector('input[name="reason"]').value;
      if (!reason.trim()) {
        alert('请填写不喜欢水果的原因');
        return;
      }
      alert(`提交成功！原因：${reason}`);
      // 如需实际提交表单，可取消注释下方代码
      // this.submit();
    });
  </script>
</body>
</html>

关键细节说明 #

1. CSS控制显示：通过.form-section默认隐藏所有表单区域，.current类标记当前需要显示的区域
2. 分支判断：在nextSection函数中，针对第一步的单选框选择结果，动态切换到对应的后续步骤
3. 基础验证：添加了简单的非空验证，确保用户完成当前步骤后才能继续
4. 返回逻辑：统一从第二步、第三步返回第一步，可根据需求修改为返回上一级步骤

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