html/jquery多步骤表单-根据选择的单选按钮转到下一步

我是jquery新手，需要表单方面的帮助，这是一个分为多个步骤的单个表单（7）。所以在第一步中（见下面的代码），我有5个单选按钮：学校、朋友、家、健康和活动。我试图实现的是，如果用户选择单选按钮“学校”并单击“下一步”按钮，它将显示一个包含与学校相关问题的div，如果选择朋友，它将显示一个包含与朋友相关问题的div，依此类推。。。这些特定于主题的div在文档加载时隐藏

请友善点，这里的新手。在此方面的任何帮助都将不胜感激：）

你对什么感兴趣？（选择一个）
请选择一个

学校

主页

朋友们

活动

健康

下一个

单击“简单”按钮尝试此操作

var val = $('input:radio[name=path]:checked').val();

switch (val )
{
case 'school':
  $('#step1-1').show();
  break;
case 'home':
  $('#step1-2').show();
  break;
case 'friends':
  $('#step1-3').show();
  break;
case 'activities':
 $('#step1-4').show();
  break;
case 'health':
  $('#step1-5').show();
  break;
default:

}

---

假设已加载文档且问题div已隐藏，则可以执行以下操作：

$('div.form button').click( function() {
    var value = $('div.form input').val();
    switch (value) {
        case 'school':
            $('#step1-1').show();
        break;
        case 'home':
            $('#step1-2').show();
         break;
        case 'friends':
            $('#step1-3').show();
         break;
        case 'activities':
            $('#step1-4').show();
        break;
        case 'health':
            $('#step1-5').show();
        break;
    }
});

---

我在这里对您的标记作了一些随意的处理，并通过一些假设猜测了您的意图

跳到这把小提琴，看看它是如何工作的：

• 使您的

  step1-X

  元素在流程中的步骤
• 假设步骤中的每个选择都有某种类型的形式-我以学校为例
• 给了表单一些内在的智能
• 使按钮不是提交按钮
• 使收音机标签成为可点击的标签，而不仅仅是每个标签的文本
• 在下一张表格（学校表格）上点击“上一张”按钮

只需选择“学校”单选按钮，然后单击“下一步”按钮即可在下一步查看空的学校表格。我把它留给你，让你把你想要的，在那里，并添加更多的表格等。代码应该是通用的，如果你复制以前的表格作为一个开始

修改后的标记：（不完整，由您完成）

---

请注意，我在不同的地方添加了一些类，以使代码更小/更容易。

根据您的最终选择和您创建的小提琴，这里作为一个简单的重构来考虑：

在接下来的步骤中添加一个类“steps”，并为每个值添加一个类。例如：

<div id="step1" class='steps initial'>

在此处使用您的小提琴查看已注释的更改：

---

如果它是表单中的，可能不希望它是一个提交按钮，因为每次单击它都会触发一篇文章，而且听起来按钮只是一个显示不同部分的触发器。这就成功了！我只是增加了一点效果。这里演示谢谢Farhan！这是一段令人印象深刻的代码，我仍在努力理解它。谢谢你花时间提供你的答案。如果你只是把每一件事情单独考虑，考虑如何使它更简单，代码更可维护，这并不难。正如在其他答案中，当我用一个CASE／Switter语句结束时，我总是考虑如何/为什么我需要它，以及我是否应该重新调整方法/函数。我会根据您的最终答案选择添加另一个答案，让您明白我的意思。谢谢！这与Farhan提供的解决方案类似

<div id="step0" class="steps" data-nextstep="step1-1">
    <div class="form"><span class="action">none</span>
         <h2>What interests you? (select one)</h2>
        <label class="val">Please select one</label>
        <label for="school">
            <input type="radio" id="school" name="path" value="school" />School</label>
        <label for="home">
            <input type="radio" id="home" name="path" value="home" />Home</label>
        <label for="home">
            <input type="radio" id="friends" name="path" value="friends" />Friends</label>
        <label for="activities">
            <input type="radio" id="activities" name="path" value="activities" />Activities</label>
        <label for="health">
            <input type="radio" id="health" name="path" value="health" />Health</label>
    </div>
    <button class="btn btn-primary formNext" type="button" name="submit_first" id="submit_first" value="">Next</button>
</div>
<div id="step1-1" class="steps" data-nextstep="step1-2">Step 1
    <div class="form school">school
        <button class="previous">Previous Form</button>
    </div>
</div>
<div id="step1-2" class="steps"></div>
<div id="step1-3" class="steps"></div>
<div id="step1-4" class="steps"></div>
<div id="step1-5" class="steps"></div>

// hide all the steps and forms, then show the first one
$('.steps, .form').hide().eq(0).show().find('.form').eq(0).show();
// form radio change action, uses the values, adds that as "action" to the Next button
$('.form').on('change', 'input:radio', function () {
    $(this).parents('.steps').find('.formNext').data('action', $(this).val());
    $(this).parents('.steps').find('.action').text($(this).val());
});
// put some action on the Next button, using the action from the radio choice
// hide the form, show the one choosen
$('.formNext').click(function () {
    var nextForm = $(this).parents('.steps').data('nextstep');
    var action = $(this).data('action');
    if (action && action.length) {
        $(this).siblings('.form').find('.action').text(action + " is " + nextForm + " action");
        $('#' + nextForm).show().find('.form.' + action).show();
        $(this).parents('.steps').hide();
    };
});
// event handler for new Previous button on second form
$('.previous').click(function () {
    $(this).parents('.steps').hide().find('.form').hide();
    $(this).parents('.steps').prev().show();
});

<div id="step1" class='steps initial'>

<div id="step1-1" class="school steps">
<div id="step1-2" class="home steps">
...

var val = $('input:radio[name=path]').val();
$('.steps.initial').slideUp();// class added to the initial one (see above)
$('.steps.' + val).slideDown();