checkboxes conditional statements show/hide

jswannabe · 11-24-2012, 04:35 AM

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>

felgall · 11-24-2012, 05:28 AM

You are not setting a display value for the first message to hide it again when either checkbox is unckecked.

jswannabe · 11-30-2012, 02:24 AM

I added a fourth if statement to it to get it to do what I wanted.

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("message1").style.display="block";
document.getElementById("message2").style.display="none"; 
document.getElementById("message3").style.display="none";
}
if (question2.checked)
{document.getElementById("message1").style.display="none";
document.getElementById("message2").style.display="block";
document.getElementById("message3").style.display="none";
}

if ((question1.checked) && (question2.checked))
{document.getElementById("message1").style.display="none";
document.getElementById("message2").style.display="none";
document.getElementById("message3").style.display="block";}

if ((question1.checked==false) && (question2.checked==false)) 
{
document.getElementById("message1").style.display="none";
document.getElementById("message2").style.display="none";
document.getElementById("message3").style.display="none";
}
}
</script>
<p>

</p>
</body>
</html>