1
本質的に、いくつかのラジオボタンオプションで1つの質問を表示します。 1つのボタンがクリックされると、新しい質問がラジオボタンの新しいセットで最初に表示されます（選択された回答に固有）。
このセットからの回答をクリックすると、下に別の質問が表示されます（ここで選択した回答に固有）。
ユーザーが以前のラジオボタンのいずれかを選択することにした場合、そのボタンの後にあるすべてのボタン（答えに無関係）を隠すことを希望します。ラジオボタンを使用してネストされたdivを表示/非表示
いつでも選択したオプションは、別のオプションが選択されていてもページに残ります（異なるオプションは単にリストに追加されます）。または、最新の質問のみが残りますあなたは、動的を使用する必要が
$(document).ready(function(){
$("input[name$='group1']").click(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});.desc { display: none; }<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic jQuery Quiz Demo Page</title>
<link rel="Stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Troubleshooting</h1>
\t <h2>What needs to be fixed?</h2>
<form>
<div><label><input type="radio" name="group1" value="in1">Internet</label></div>
<div><label><input type="radio" name="group1" value="tv1">TV</label></div>
<div><label><input type="radio" name="group1" value="ph1">Phone</label></div>
</form>
<div id="in1" class="desc">
<h3>Internet Troubleshooting</h3>
\t <h3>Are there lights on the router?</h3>
\t <form>
\t <div><label><input type="radio" name="group1" value="in2">Yes</label></div>
\t <div><label><input type="radio" name="group1" value="in3">No</label></div>
\t </form>
</div>
<div id="in2" class="desc">
<h3>Is the power light red?</h3>
\t <form>
\t <div><label><input type="radio" name="group1" value="in4">Yes</label></div>
\t <div><label><input type="radio" name="group1" value="in5">No</label></div>
\t </form>
</div>
<div id="in3" class="desc">
<h3>Is the router plugged in?</h3>
\t <form>
\t <div><label><input type="radio" name="group1" value="in6">Yes</label></div>
\t <div><label><input type="radio" name="group1" value="in7">No</label></div>
\t </form>
</div>
<div id="in4" class="desc">
<h3>Failing Device</h3>
\t <p>A red power light most likely indicates the device is not functioning properly. Contact your ISP.</p>
</div>
<div id="in6" class="desc">
<h3>Plug the router into another outlet. Is the power light on?</h3>
\t <form>
\t <div><label><input type="radio" name="group1" value="in4">Yes</label></div>
\t <div><label><input type="radio" name="group1" value="in5">No</label></div>
\t </form>
</div>
<div id="in7" class="desc">
<h3>Please plug in your router and try again once the router has fully started up. (Note: This process may take up to 5 minutes)</h3>
</div>
<div id="tv1" class="desc">
<h1>TV Troubleshooting</h1>
\t <form>
\t <div><label><input type="radio" name="group1" value="tv2">opt1</label></div>
\t <div><label><input type="radio" name="group1" value="tv3">opt2</label></div>
\t <div><label><input type="radio" name="group1" value="tv4">opt3</label></div>
\t </form>
</div>
<div id="ph1" class="desc">
<h1>Phone Troubleshooting</h1>
\t <form>
\t <div><label><input type="radio" name="group1" value="ph2">opt1</label></div>
\t <div><label><input type="radio" name="group1" value="ph3">opt2</label></div>
\t <div><label><input type="radio" name="group1" value="ph4">opt3</label></div>
\t </form>
</div>
</body>
</html>
私はこの回答に同意しません。私の答えを数分で投稿する。タイトルは「シンプルなjQueryクイズ」なので、私はそれをJavaScriptで完全に書くことは望ましい解決策だとは思わない。 – NoobishPro