Question

我有一个表格，有4个问题（1个问题有4个单选按钮），每个问题都存储在div中。

使用jquery我首先显示第一个div，当我按下下一个按钮时我会显示第二个，依此类推。

以下是整个代码：

    <form style="position:absolute; margin-left:140px;" method="post">
        <div id="question1">
            Q1
            <br/>
            <input name="q1" type="radio" value="q1a1">
            A1
            <br/>       
            <input name="q1" type="radio" value="q1a2">
            A2      
            <br/>
            <input name="q1" type="radio" value="q1a3"> 
            A3  
            <br/>
            <input name="q1" type="radio" value="q1a4"> 
            A4
            <br/>
        </div>

        <div id="question2">
            Q2
            <br/>
            <input name="q2" type="radio" value="q2a1">
            A1
            <br/>       
            <input name="q2" type="radio" value="q2a2">
            A2      
            <br/>
            <input name="q2" type="radio" value="q2a3"> 
            A3  
            <br/>
            <input name="q2" type="radio" value="q2a4"> 
            A4
            <br/>
        </div>

        <div id="question3">
            Q3
            <br/>
            <input name="q3" type="radio" value="q3a1">
            A1
            <br/>       
            <input name="q3" type="radio" value="q3a2">
            A2      
            <br/>
            <input name="q3" type="radio" value="q3a3"> 
            A3  
            <br/>
            <input name="q3" type="radio" value="q3a4"> 
            A4
            <br/>
        </div>

        <div id="question4">
            Q4
            <br/>
            <input name="q4" type="radio" value="q4a1">
            A1
            <br/>       
            <input name="q4" type="radio" value="q4a2">
            A2      
            <br/>
            <input name="q4" type="radio" value="q4a3"> 
            A3  
            <br/>
            <input name="q4" type="radio" value="q4a4"> 
            A4
            <br/>
        </div>
        <br/><br/><br/><br/>
        <input type="button" id="submit" name="Submit" />
    </form>
<button id="next">Next question</button>
<script>
$('#submit').hide();
$('div[id^="question"]').hide().first().show();
    $("#next").click(function (e) {
        event.preventDefault();
        $('div[id^="question"]:visible').hide().next().show();
    });
</script>

这就是我想要的 - 当最后一个（第4个）问题加载时，我希望我的next按钮更改为提交按钮。当我按下提交按钮时，它会显示已选择女巫单选按钮。关于我该怎么做的任何建议？

Answer 1

尝试这样的事情：

var currentQuestion = 1;
$(document).ready(function() {
    $('.next').click(function(e) {
        e.preventDefault();
        if(currentQuestion < 4) {
            $('#question' + (currentQuestion).toString()).hide();
            $('#question' + (currentQuestion + 1).toString()).show();
            currentQuestion++;
        }
        else { // On question four, process the form
            // Not sure what you want to do with the data, but 
            // you can parse them like this:
            var selections = {};
            for(var i=1;i<=4;i++) {
                selections[i] = $('input[name="q' + i.toString() + '"]:checked').val()
            }

            // Then you have a JS object with your questions and 
            // corresponding choices, so you can do what you want.
        }
   });
});

使用jquery显示表单结果

1 个答案: