Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2012
    Location
    Canada
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You are not setting a display value for the first message to hide it again when either checkbox is unckecked.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Nov 2012
    Location
    Canada
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •