我得到了一个表单，有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按钮更改为提交按钮。当我按下提交按钮，它会显示哪个单选按钮被选中。有什么建议吗?
试试这样:
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.
}
});
});