Toggle the visibility of divs based on checkboxes using Javascript
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>
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>
上一篇: 点击事件不会在ajax事件后触发