Toggle the visibility of divs based on checkboxes using Javascript

Question

I want all divs to be hidden on load. I then want to show / hide Divs depending on which checkboxes are checked.

For my example, I have 3 Sports Cars:

Sports Car 1 = Display, No GPS.

Sports Car 2 = GPS and Display.

Sports Car 3 = GPS, No Display.

So when Sports Car is selected it displays the 'sportsCarAll' Div containing all Sports Car models (while keeping all other Divs hidden).

But when, Sports Car + GPS are both selected it displays 'sportsCarGps' Div and hides other Divs.

I'm new to JavaScript so any help would be greatly appreciated.

HTML:

<div>
    <input type="checkbox" id="sportsCar" name="cartype">
    <input type="checkbox" id="gps" name="extraGps">
    <input type="checkbox" id="display" name="extraDisplay">
</div>
<div id="sportsCarAll">
    <h2>Sports Car 1, Sports Car 2 or Sports Car 3</h2>
</div>
<div id="sportsCarGps">
    <h2>Sports Car 2 or Sports Car 3</h2>
</div>
<div id="sportsCarDisplay">
    <h2>Sports Car 1 or Sports Car 2</h2>
</div>
<div id="sportsCarGpsAndDisplay">
    <h2>Sports Car 2</h2>
</div>

This is the Javascript I'm trying but to no avail. Any help would be appreciated.

   <script type="text/javascript" language="JavaScript">
       function hideDiv() {
        document.getElementById('sportsCarAll').style.visibility= 'hide';
        sportsCarGps.style.visibility = 'hide';
        document.getElementById('sportsCarDisplay').style.visibility = 'hide';
        document.getElementById('sportsCarGpsAndDisplay').style.visibility = 'hide';
        }

function showContent(){
if(document.getElementById('sportsCar').checked && 
document.getElementById('gps').checked &&
  document.getElementById('display').checked){
        document.getElementById('sportsCarGpsAndDisplay').style.visibility = 'show'
        document.getElementById('sportsCarAll').style.visibility = 'hide'
        document.getElementById('sportsCarGps').style.visibility = 'hide'
        document.getElementById('sportsCarDisplay').style.visibility = 'hide';
}
else if(document.getElementById('sportsCar').checked && 
document.getElementById('gps').checked){
        document.getElementById('sportsCarGpsAndDisplay').style.visibility = 'hide'
        document.getElementById('sportsCarAll').style.visibility = 'hide'
        document.getElementById('sportsCarGps').style.visibility = 'show'
        document.getElementById('sportsCarDisplay').style.visibility = 'hide';
}
             else if(document.getElementById('sportsCar').checked && 
document.getElementById('display').checked){
    document.getElementById('sportsCarGpsAndDisplay').style.visibility = 'hide'
        document.getElementById('sportsCarAll').style.visibility = 'hide'
        document.getElementById('sportsCarGps').style.visibility = 'hide'
        document.getElementById('sportsCarDisplay').style.visibility = 'show';
}
             else(document.getElementById('sportsCar').checked){
    document.getElementById('sportsCarGpsAndDisplay').style.visibility = 'hide'
        document.getElementById('sportsCarAll').style.visibility = 'show'
        document.getElementById('sportsCarGps').style.visibility = 'hide'
        document.getElementById('sportsCarDisplay').style.visibility = 'hide';
}
}

    </script>

Show us what have you tried. Then we all will help you on that. — yeshansachithak, Jul 24 '14 at 10:28
I've added the javascript I'm trying but I'm struggling to get any of it working. Any help would be great. — Jack_O, Jul 24 '14 at 10:56

Styptic · Accepted Answer · 2014-07-24T11:30:41.490

have'nt read all your code but here's a simple example

<html>
    <head>
        <style type="text/css">
            #myData{visibility:hidden;}
        </style>
        <script language="JavaScript">

            function toggleVisibility(eventsender, idOfObjectToToggle){
                var myNewState = "hidden";
                if (eventsender.checked === true){
                    myNewState = "visible";
                }

                document.getElementById(idOfObjectToToggle).style.visibility = myNewState;
            }       
        </script>
    </head>
    <body>
        <input type="checkbox" id="myId" name="myName" onClick = "JavaScript:toggleVisibility(this,'myData');"/>
        <div name="myData" id="myData"> <h1>My Data</h1></div>
    </body>
</html>

i've written a small example to switch between different combinations (warning! it's just quick and dirty)

<html>
<head>
<style type="text/css">
    #myData{visibility:hidden;}
    #myData2{visibility:hidden;}
    #myData3{visibility:hidden;}
</style>
<script language="JavaScript">      

    function evaluateCheckboxState()
    {
        var itemToToggle = 0;
        if (document.getElementById("myId").checked) itemToToggle += 1;
        if (document.getElementById("myId2").checked) itemToToggle += 2;            
        return itemToToggle;
    }

    function toggleVisibility()
    {
        var myNewState = "hidden";
        var itemToShow = evaluateCheckboxState();
        var idToShow = "";
        //hide all divs                     
        document.getElementById("myData").style.visibility = myNewState;
        document.getElementById("myData2").style.visibility = myNewState;
        document.getElementById("myData3").style.visibility = myNewState;
        if (itemToShow === 0) return;

        switch (itemToShow)
        {
            case 1:
                idToShow = "myData";
                break;
            case 2:
                idToShow = "myData2";
                break;
            case 3:
                idToShow = "myData3";
                break;
            default:
                break;  
        }           

        myNewState = "visible";
        document.getElementById(idToShow).style.visibility = myNewState;
    }       
</script>
</head>
<body>
<input type="checkbox" id="myId" name="myName" onClick = "JavaScript:toggleVisibility();"/>
<input type="checkbox" id="myId2" name="myName2" onClick = "JavaScript:toggleVisibility();"/>
 <div name="myData" id="myData"> <h1>My Data1</h1></div>
 <div name="myData2" id="myData2"> <h1>My Data2</h1></div>
 <div name="myData3" id="myData3"> <h1>My Data3</h1></div>
</body>
</html>

Thanks for your reply. What I'm trying to achieve is if 2 checkboxes are checked it displays a different div to if the either checkbox was checked individually. Would this method work for that? — Jack_O, Jul 24 '14 at 11:06
no, this simple example is just switching the div between visible and hidden — Styptic, Jul 24 '14 at 11:11
Thanks, I'll have a look and see if I can get it to work with my example. Really appreciated. — Jack_O, Jul 24 '14 at 11:32

Toggle the visibility of divs based on checkboxes using Javascript

1 Answers1