[Here is below answer as a jsFiddle]
這個答案的目的是作爲首發出場。我試圖在初學者級別編寫它，以便您可以自定義它。希望這個簡單的例子能給你一個開始的地方。我用一個培訓健身房的例子來詢問他們的用戶的一些基本問題。
我的方法是創建一個空的DIV，名爲#ques，其中將顯示所有問題和輸出，以及包含隱藏字段的隱藏<form>將存儲響應。
我創建了一個計數器，cnt，它在每個問題後遞增。
有一個稱爲ask_next_ques()的函數，其參數爲cnt。根據我們在調查中的位置，它會詢問下一個問題（例如，當cnt == 3它提出第三個問題時）。
不幸的是，JavaScript堅持所有的字符串都在一行上。因此，我建立這樣的HTML：
var qq = '
<ul style="list-style:none">
<li>
What can you curl?<br />
<input type="text" id="curl"> Kg
</li>
<li>
What can you bench?<br />
<input type="text" id="bench"> Kg
</li>
<li>
What can you lift?<br />
<input type="text" id="lift"> Kg
<input type="button" id="cbl_btn" value="Go">
</li>
</ul>
';
，然後重新安排它到一條線，像這樣：
var qq = '<ul style="list-style:none"><li>What can you curl?<br /><input type="text" id="curl"> Kg</li><li>What can you bench?<br /><input type="text" id="bench"> Kg</li><li>What can you lift?<br /><input type="text" id="lift"> Kg<input type="button" id="cbl_btn" value="Go"></li></ul>';
更難以讀取的方式，但這是JavaScript的是如何想的事情。
隨着每個問題的回答，答案都會被javascript/jQuery讀取，然後保存到<form>結構中的隱藏字段中。
當所有問題都被要求時，您可以將表單發佈到另一個（PHP？）文件進行處理（存儲在MySQL數據庫中？），或者將答案通過電子郵件發送給您自己，或者將其重新顯示給用戶，或...我選擇在燈箱中顯示答案。
這裏是所有的代碼。只需將其複製/粘貼到單個HTML或PHP文件中，然後運行即可。
SURVEY.PHP
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /><!--Lightbox-->
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script><!--Lightbox-->
<style>
</style>
<script type="text/javascript">
//Declare vars outside document.ready() so they can be accessed globally
var ctr = 1;
var mf = '';
var pl = '';
$(document).ready(function() {
ask_next_ques(ctr);
/* ------------------------------------------------------------ */
$("input:radio[name=gender]").click(function() {
//Note: var mf must be initialized above (outside document.ready()) so can be used in below fn ask_next_ques()
mf = $('input:radio[name=gender]:checked').val();
$('#hgender').val(mf);
ctr++;
ask_next_ques(ctr);
});
/* ------------------------------------------------------------ */
$(document).on('click', "#cbl_btn", function() {
var cc = $("#curl").val();
var bb = $("#bench").val();
var ll = $("#lift").val();
//alert('Value of cc: ' +cc+ ' Value of bb: ' +bb+ ' Value of ll: ' + ll);
//Check if any one of these fields left empty
if (cc.length<1 || bb.length<1 || ll.length<1) {
alert("Please complete all fields");
}else{
$('#hcurl').val(cc);
$('#hbench').val(bb);
$('#hlift').val(ll);
ctr++;
ask_next_ques(ctr);
}
});
/* ------------------------------------------------------------ */
$(document).on('click', "input:radio[name=plan]", function() {
//Note: var pl must be initialized above so can be used in below fn ask_next_ques()
pl = $('input:radio[name=plan]:checked').val();
$('#hplan').val(pl);
ctr++;
ask_next_ques(ctr);
});
/* ------------------------------------------------------------ */
}); //END $(document).ready()
function ask_next_ques(ctr) {
if (ctr==1) {
var qq = 'Male: <input value="Male" type="radio" name="gender"><br />Female: <input value="Female" type="radio" name="gender">';
$('#ques').html(qq);
}else if (ctr==2){
var qq = '<ul style="list-style:none"><li>What can you curl?<br /><input type="text" id="curl"> Kg</li><li>What can you bench?<br /><input type="text" id="bench"> Kg</li><li>What can you lift?<br /><input type="text" id="lift"> Kg<input type="button" id="cbl_btn" value="Go"></li></ul>';
$('#ques').html(qq);
}else if (ctr==3){
var qq = 'Are you an:<br />Owner: <input value="Owner" type="radio" name="plan"><br />Member: <input value="Member" type="radio" name="plan">';
$('#ques').html(qq);
}else if (ctr==4){
//All questions have been asked; All responses saved into hidden fields
//Can now read all hidden fields and do an AJAX POST into the database, or
//Or can simply POST the form to another page for processing.
alert("All questions have been asked");
var hg = $('#hgender').val();
var hc = $('#hcurl').val();
var hb = $('#hbench').val();
var hl = $('#hlift').val();
var hp = $('#hplan').val();
qq = 'The values saved into all hidden fields are:<br />Gender: ['+hg+ ']<br />Curl: [' +hc+ ']<br />Bench: [' +hb+ ']<br />Lift: [' +hl+ ']<br />Plan: [' +hp+ ']<br />You can now send these values to a<br />database, or email them to yourself.';
$('#ques').html(qq);
//We could just leave it here, but to be interesting we'll display the results in a lightbox
//To remove all lightbox stuff, just delete the next 8 lines and delete the two lightbox references in the header (for jquery-ui)
$('#ques').dialog({
autoOpen:true,
width: 450,
title: "Hidden Field Valuess:",
close: function() {
alert('Thank you for taking our survey');
}
});
}
}
</script>
</head>
<body>
<div id="ques"></div>
<div id="hidden_form">
<form method="POST">
<input type="hidden" id="hgender" name="gender">
<input type="hidden" id="hcurl" name="curl">
<input type="hidden" id="hbench" name="bench">
<input type="hidden" id="hlift" name="lift">
<input type="hidden" id="hplan" name="owner">
</form>
</div>
</body>
</html>
這是很難幫助時，我們有很多的假設。如果您可以更改問題並指出您正在嘗試解決的具體問題 –
準確理解什麼，如何向特定控件（按鈕，選擇等）添加（綁定，操作） ??我們可以幫助你，如果你問清楚你想要什麼... – ncubica
我把設置和我想在這個小提琴中做什麼http://jsfiddle.net/vicky1212/MVCGS/ – user2537145