上の行の画像をクリックするまで、すべての質問が非表示になるようにするにはどうすればよいですか。基本的に、このフォームに表示/非表示の div を追加したいと考えています。すべての質問に回答すると、最後に「次へ」ボタンが表示されます。ユーザーが気が変わって別の回答や画像をクリックすると、すべてが非表示に戻り、コンテンツが再び表示されます。別のテストフォームを作成しましたが、機能しますが、希望どおりに機能するため、ここにいます. 助けて。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(window).load(function () {
$('.radio div').on('click', function () {
var $this = $(this),
$parent = $this.parent(),
value = $this.attr('value');
$parent.children().removeClass('active');
$this.addClass('active');
$parent.attr('value', value);
//get all selected radios
var q1 = $('div[name="q1"].active');
var q2 = $('div[name="q2"].active');
var q3 = $('div[name="q3"].active');
var q4 = $('div[name="q4"].active');
//make sure the user has selected all 3
if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0) {
//now we know we have 3 radios, so get their values
q1 = q1.attr('value');
q2 = q2.attr('value');
q3 = q3.attr('value');
q4 = q4.attr('value');
// activate button
$('#next_button').removeAttr('disabled');
//now check the values to display a different link for the desired
configuration
if (q1 == "AT&T" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
$('#next_button').val('att 8gb black').click(function () {
window.location.href = 'http://google.com/'
});
} else if (q1 == "AT&T" && q2 == "16GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://bing.com/';\">another option</input>";
} else if (q1 == "AT&T" && q2 == "16GB" && q3 == "Black" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
} else if (q1 == "AT&T" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
} else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
} else if (q1 == "Unlocked" && q2 == "8GB" && q3 == "Black" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://webs.com/';\">orange</input>";
} else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "White" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
} else if (q1 == "Unlocked" && q2 == "16GB" && q3 == "Black" && q4 == "Black") {
document.getElementById("linkDiv").innerHTML = "<input type=button value=Next
onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
}
}
});
}); //]]>
</script>
</head>
<body class="questionnaire">
<form name="quiz" id='quiz'>
<h4>Choose your series.</h4>
<div class="radio" id="form">
<div style="list-style: none;" type="radio" name="q4" value="iPhone-3GS">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q4" value="iPhone-4">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q4" value="iPhone-4S">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
/>
</div>
</div>
<div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
/>
</div>
</div>
<div style="list-style: none;" type="radio" name="q4" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
/>
</div>
</div>
<br />
<br />
<BR>
<h4>What carrier do you have?</h4>
<div class="radio" id="form">
<div style="list-style: none;" name="q1" value="AT&T">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/ATT-logo.png"
/>
</div>
<div style="list-style: none;" name="q1" value="Unlocked">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/Factory-Unlocked.png"
/>
</div>
</div>
<br />
<br />
<BR>
<h4>What is your phones capicity?</h4>
<div class="radio" id="form">
<div style="list-style: none;" type="radio" name="q2" value="8GB">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/8GB.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q2" value="16GB">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/16GB.png"
/>
</div>
</div>
<br />
<br />
<BR>
<h4>What color is your phone?</h4>
<div class="radio" id="form">
<div style="list-style: none;" type="radio" name="q3" value="iPhone-3GS">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-3GS.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q3" value="iPhone-4">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q3" value="iPhone-4S">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-4S.png"
/>
</div>
<div style="list-style: none;" type="radio" name="q3" value="iPhone-5">
<img width="50px" height="50px" src="http://wepriceit.webs.com/Images/iPhone-5.png"
/>
</div>
</div>
<br/>
<br />
<br />
<BR>
<BR>
<div id="linkDiv">
<input id="next_button" type="button" disabled="disabled" value="Next"
/>
</div>
</form>
</body>
</html>