That makes it more difficult but it can be done, below is an example: (I dont know if there is a more streamlined workflow. (I certainly would not be wanting to do many more than about 3 questions, otherwise the combinations start multiplying considerably)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
// form validation
$(function(){
$('.white_show').hide();
$('.white_red_show').hide();
$('.white_rose_show').hide();
$('.white_red_rose_show').hide();
$('.red_show').hide();
$('.rose_show').hide();
$('.red_rose_show').hide();
$('#questions').css('cursor','pointer').submit(function(){
$('.answers div').hide();
//Check if checkbox is checked
if ($('.white').is(':checked')) {
var white = $('.white').val();
}
//Check if checkbox is checked
if ($('.red').is(':checked')) {
var red = $('.red').val();
}
//Check if checkbox is checked
if ($('.rose').is(':checked')) {
var rose = $('.rose').val();
}
//Likes White Wine
if (white == "white" && red != "red" && rose != "rose") {
$('.white_show').show();
return false;
}
//Likes White & Rosa Wine
if (white == "white" && red != "red" && rose == "rose") {
$('.white_rose_show').show();
return false;
}
//Likes Red & Rosa Wine
if (white != "white" && red == "red" && rose == "rose") {
$('.red_rose_show').show();
return false;
}
//Likes Red Wine
if (white != "white" && red == "red" && rose != "rose") {
$('.red_show').show();
return false;
}
//Likes White & Red Wine
if (white == "white" && red == "red" && rose != "rose") {
$('.white_red_show').show();
return false;
}
//Likes White, Red & Rosa Wine
if (white == "white" && red == "red" && rose == "rose") {
$('.white_red_rose_show').show();
return false;
}
//Likes Rosa Wine
if (white != "white" && red != "red" && rose == "rose") {
$('.rose_show').show();
return false;
}
});
});
</script>
</head>
<body>
<form id="questions" method="post" action="">
<p>Please select every wine that you like.</p>
<label for="white">White?</label>
<input type="checkbox" name="white" value="white" class="white" id="white"/>
<br>
<label for="red">Red?</label>
<input type="checkbox" name="red" value="red" class="red" id="red" />
<br>
<label for="rosa">Rose?</label>
<input type="checkbox" name="rose" value="rose" class="rose" id="rose"/>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<!-- end questions -->
<div class="answers">
<div class="white_show">
<p>You told us you like white wine</p>
</div>
<div class="red_show">
<p>You told us you like red wine</p>
</div>
<div class="white_red_show">
<p>You told us you like white AND red wine</p>
</div>
<div class="white_rose_show">
<p>You told us you like white AND rose wine</p>
</div>
<div class="white_red_rose_show">
<p>You told us you like white AND red AND rose wine</p>
</div>
<div class="red_rose_show">
<p>You told us you like red AND rose wine</p>
</div>
<div class="rose_show">
<p>You told us you like rose wine</p>
</div>
</div>
<!-- end answers -->
</body>
</html>
1 Correct answer
9
Replies
AdChoices