Question

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

请好，新手在这里。任何有关这方面的帮助将不胜感激：）

<div class="form">
    <h2>What interests you? (select one)</h2>

    <label class="val" style="width:250px;color:red;">Please select one</label><br> 
    <input type="radio" id="school" name="path" value="school" /> School <br>    
    <input type="radio" id="home" name="path" value="home" /> Home <br>         
    <input type="radio" id="friends" name="path" value="friends" /> Friends <br>           
    <input type="radio" id="activities" name="path" value="activities" /> Activities <br>
    <input type="radio" id="health" name="path" value="health" /> Health <br>
 </div>
 <div class="clear"></div><!-- /clearfix -->
 <button class="btn btn-primary" type="submit" name="submit_first" id="submit_first" value="">Next</button>
 </div>     
 <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
 <div id="step1-1"></div>
 <div id="step1-2"></div>
 <div id="step1-3"></div>
 <div id="step1-4"></div>
 <div id="step1-5"></div>

Answer 1

点击简单按钮

即可试用

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:

}

Answer 2

假设文档已加载并且您隐藏了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;
    }
});

Answer 3

我对你的标记采取了一些自由，并用一些假设猜测了你的意图。

跳到这个小提琴，看看它是如何工作的：http://jsfiddle.net/rRmRY/

在此过程中制定了step1-X元素步骤。
为步骤中的每个选项假设了某种形式 - 我用学校作为例子
给表格一些内部智慧
使按钮不是提交按钮
通过使标签不仅仅是每个文本
在下一个表格（学校表格）上放置“上一页”按钮

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

修订标记:(不完整，为你完成）

<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();
});

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

Answer 4

根据您的最终选择以及您创建的小提琴，在此作为一个简单的重构考虑：

为后续步骤添加一个“步骤”类和每个值一个。例如：

<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();

在此处使用您的小提琴进行评论：

http://jsfiddle.net/Cxfgj/9/

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

4 个答案: