Question

我正在制作一份调查表。它应该一次显示一个问题。

每个问题都有许多单选按钮。单击一个单选按钮时，问题将被删除（显示：无;可能带有滑动动画），下一个将进入视图。

这是我们到目前为止的表单和结构的简化版本。我之前没有做过那么多的前端编程 - 所以我不知道是否有一种简单的标准方法可以用Javascript或jQuery做到这一点？

非常欣赏正确方向的一些指示。这是概念：

显示问题＃1的div
点击radiobutton
隐藏问题＃1的div
显示问题＃2的div
点击radiobutton

隐藏问题＃2的div 等...

<form method="post">

    <div id="question_1">
        <div class="question">
        Question 1
        </div>
        <div class="table">
            <input type="radio" value="1" name="rb_1">
            <input type="radio" value="2" name="rb_1">
        </div>
    </div>   

    <div id="question_2">
        <div class="question">
        Question 2
        </div>
        <div class="table">
            <input type="radio" value="1" name="rb_2">
            <input type="radio" value="2" name="rb_2">
        </div>
    </div> 

    <div id="question_3">
        <div class="question">
        Question 3
        </div>
        <div class="table">
            <input type="radio" value="1" name="rb_3">
            <input type="radio" value="2" name="rb_3">
        </div>
    </div> 

    <div id="question_4">
        <input type="submit" name="submit">
    </div> 

</form>

Answer 1

这不会让用户非常友好，但会按照您的要求做出并提出方法

进行调整以将class="question"移至ID的外层。设置行为元素的通用类通常比定位ID

更简单

<div id="question_1" class="question">

JS

$(function(){    
    $('.question :radio').change(function(){
        $(this).closest('.question').hide().next().show();
    });    
});

您可以使用许多form wizard或form steps类型的插件来提供更多动画，上一个/下一个按钮和可视步骤指示器等

的 DEMO

Answer 2

隐藏所有div的默认值。单击div中的单选按钮时，显示下一个div并隐藏该div。所以在jQuery中，在div上使用get元素，并将其display属性设置为none。将每个div存储到div数组中。有一个单击单选按钮激活的功能。单击它时，从单选按钮div转到数组中的下一个div，并将其显示设置为阻止。

一次显示一个div（如一副牌）

2 个答案: