質問に答えていくと、回答によって次の質問が変わるサンプルありませんか

質問

質問に答えていくと、回答によって次の質問が変わるサンプルありませんか。

[A or B?]
↓
Aをクリックすると
[C or D?]

Bをクリックすると
[you are B]

みたいなのを画面遷移なしでやりたいのです。
(Flashでやれと言われそうですが)

このようなJavaScriptのサンプルがあったら教えてください。

回答No.1

babu_baboo · ベストアンサー

<style type="text/css">
#menu li { display:none; }
</style>

<ul id="menu">
<li id="Q1">
回答者の態度は、良くないと思いますか？
<input type="button" value="Yes" onCLick="next(this,'Q2')">
<input type="button" value="No" onClick="next(this,'Q3')">
</li>
<li id="Q2">
それでも問題は解決しましたか？
<input type="button" value="Yes" onCLick="next(this,'Q10')">
<input type="button" value="No" onClick="next(this,'Q3')">
</li>
<li id="Q3">
自分で解決しようと努力しましたか？
<input type="button" value="Yes" onCLick="next(this,'Q11')">
<input type="button" value="No" onClick="next(this,'Q4')">
</li>
<li id="Q4">
今後、有料で承ります。
</li>
<li id="Q10">
よかった。ばぶ。
</li>
<li id="Q11">
そうか～。ばぶ。
</li>
</ul>
<script type="text/javascript">
window.onload = function() { next(null, 'Q1'); };

function next(e, id) {
if (e) {
var inp = e.parentNode.getElementsByTagName('INPUT'), c = 0, o;
while (o = inp[c++]) o.disabled = o != e;
}
if (id) document.getElementById(id).style.display = 'list-item';
}

</script>

お礼

動作確認しました。
ありがとうございます！