So the problem is when a checkbox is unchecked it doesn't return to it's original state.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Show Hide Conditional</title>
<link rel="stylesheet" href=".css">
<style>
#message1, #message2, #message3 {display:none; }
</style>
</head>
<body>
<input type="checkbox" id="check1" onclick="show ()">Question One?
<input type="checkbox" id="check2" onclick="show ()">Question Two?
<div id="message1">message 1</div>
<div id="message2">message 2</div>
<div id="message3">message 3</div>
<p>
So the problem is when a checkbox is unchecked it doesn't return to it's original state.
</p>
<script>
var question1 = document.getElementById("check1");
var question2 = document.getElementById("check2");
function show ()
{
if (question1.checked)
{document.getElementById("message2").style.display="block";
document.getElementById("message3").style.display="none";
}
if (question2.checked)
{document.getElementById("message3").style.display="block";
document.getElementById("message2").style.display="none";}
if ((question1.checked) && (question2.checked))
{document.getElementById("message1").style.display="block";
document.getElementById("message2").style.display="none";
document.getElementById("message3").style.display="none";}
}
</script>
<p>
</p>
</body>
</html>