CodingForums.com - checkboxes conditional statements show/hide

CodingForums.com (http://www.codingforums.com/index.php)

- DOM and JSON scripting (http://www.codingforums.com/forumdisplay.php?f=15)

- - checkboxes conditional statements show/hide (http://www.codingforums.com/showthread.php?t=282869)

checkboxes conditional statements show/hide

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>

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

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>