如何在多步骤表单中添加单条件与多条件逻辑？

需求说明 #

为多步骤表单添加条件跳转逻辑：

• 勾选#radio1时，点击「下一步」按钮直接显示#step3
• 勾选#radio2时，点击「下一步」按钮显示#step2
  同时需要了解如何扩展更多条件分支。

完整代码实现 #

HTML（修正label关联问题） #

<form action="">
    <!-- 步骤1 -->
    <div class="steps active-step" id="step1">
        <div class="step-title">你最喜欢的语言是什么？</div>
        <div class="step-content">
            <div class="input-area">
                <input type="radio" id="radio1" name="fav_language" value="Python">
                  <label for="radio1">Python</label>
                  <input type="radio" id="radio2" name="fav_language" value="Php">
                  <label for="radio2">Php</label><br>
            </div>
        </div>
        <div class="btn-next-box">
            <button onclick="nextSection()" class="next-btn" id="step1-next">下一步</button>
        </div>
    </div>

    <!-- 步骤2 -->
    <div class="steps" id="step2">
        <button onclick="prevSection()" class="prev-btn">上一步</button>
        <div class="step-title">你有多少年的从业经验？</div>
        <div class="step-content">
            <div class="input-area">
                <input type="text" class="text-input" placeholder="请输入年限" id="experience-input">
            </div>
        </div>
        <div class="btn-next-box">
            <button onclick="nextSection()" class="next-btn" id="step2-next">下一步</button>
        </div>
    </div>

    <!-- 步骤3 -->
    <div class="steps" id="step3">
        <button onclick="prevSection()" class="prev-btn">上一步</button>
        <div class="step-title">你的邮箱是什么？</div>
        <div class="step-content">
            <div class="input-area">
                <input type="email" class="text-input" placeholder="请输入邮箱">
            </div>
        </div>
        <div class="btn-next-box">
            <button onclick="nextSection()" class="next-btn" id="step3-next">提交</button>
        </div>
    </div>
</form>

注：原HTML中label的for属性与单选框ID不匹配，已修正为正确关联。

CSS（保持原有样式） #

.steps{
    display: none;
}

.active-step{
    display: block;
}

修改后的JavaScript逻辑 #

const prevBtn = document.querySelectorAll(".prev-btn");
const nextBtn = document.querySelectorAll(".next-btn");
let currentSection = 0;

function showSection(sectionIndex) {
  const sections = document.querySelectorAll(".steps");
  sections[currentSection].classList.remove("active-step");
  sections[sectionIndex].classList.add("active-step");
  currentSection = sectionIndex;
}

function nextSection() {
  // 当前处于步骤1时，根据单选框选择跳转对应步骤
  if (currentSection === 0) {
    const radio1 = document.getElementById("radio1");
    const radio2 = document.getElementById("radio2");
    
    if (radio1.checked) {
      showSection(2); // 跳转到step3（索引从0开始）
    } else if (radio2.checked) {
      showSection(1); // 跳转到step2
    }
  } else if (currentSection < 2) {
    // 其他步骤按顺序正常跳转
    showSection(currentSection + 1);
  }
}

function prevSection() {
  if (currentSection > 0) {
    showSection(currentSection - 1);
  }
}

多条件扩展方案 #

当需要新增更多单选选项和对应跳转逻辑时，推荐以下几种维护性更好的方式：

1. 扩展if-else语句（适合少量新增条件） #

直接在判断分支里添加新的单选框判断：

function nextSection() {
  if (currentSection === 0) {
    const radio1 = document.getElementById("radio1");
    const radio2 = document.getElementById("radio2");
    const radio3 = document.getElementById("radio3"); // 新增单选框
    
    if (radio1.checked) {
      showSection(2);
    } else if (radio2.checked) {
      showSection(1);
    } else if (radio3.checked) {
      showSection(3); // 新增对应步骤索引
    }
  } else if (currentSection < 3) {
    showSection(currentSection + 1);
  }
}

2. 对象映射（适合大量条件，易维护） #

用对象存储单选框ID与目标步骤的映射关系，新增条件只需修改映射对象，无需改动判断逻辑：

// 条件映射表：键为单选框ID，值为目标步骤索引
const conditionMap = {
  "radio1": 2,
  "radio2": 1,
  "radio3": 3, // 新增选项
  "radio4": 0  // 可灵活配置任意目标步骤
};

function nextSection() {
  if (currentSection === 0) {
    // 获取当前选中的单选框
    const selectedRadio = document.querySelector('input[name="fav_language"]:checked');
    // 若选中项存在且映射表中有对应配置，则跳转
    if (selectedRadio && conditionMap[selectedRadio.id]) {
      showSection(conditionMap[selectedRadio.id]);
    }
  } else if (currentSection < Object.keys(conditionMap).length) {
    showSection(currentSection + 1);
  }
}

3. Switch-Case语句（中等数量条件） #

function nextSection() {
  if (currentSection === 0) {
    const selectedRadio = document.querySelector('input[name="fav_language"]:checked');
    if (!selectedRadio) return;
    
    switch(selectedRadio.id) {
      case "radio1":
        showSection(2);
        break;
      case "radio2":
        showSection(1);
        break;
      case "radio3":
        showSection(3);
        break;
      default:
        // 默认跳转逻辑
        showSection(currentSection + 1);
    }
  } else if (currentSection < 3) {
    showSection(currentSection + 1);
  }
}

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