Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 284
  • Last Modified:

Show/hide layers with checkbox

Does anyone know how to adapt the following script so that it works with 2 checkboxes and 2 layers, all hidden until a checkbox is selected.   If the other checkbox is selected the layer should hide,with the other becoming visible.


<html>
<body>
 
<input id="inp1" onclick="ToggleVisibility();" type="checkbox" checked="true" >Show DIV</input>
<br/>
 
<div id="div1" style="background-color:#aaaaaa;font-size:20pt;">
Hello World!
</div>
 
<script>
 
function ToggleVisibility()
    {
    var objInp = document.getElementById("inp1");
    var objDiv = document.getElementById("div1");
 
    if (objInp.checked) objDiv.style.visibility = ""; else objDiv.style.visibility = "hidden";
    }
 
</script>
 
 
</body>
</html>

Open in new window

0
hutmasterx
Asked:
hutmasterx
  • 3
1 Solution
 
zemondCommented:

<html>
<body>
 
<input id="inp1" onclick="ToggleVisibility('div1', this);" type="checkbox" checked="true" /> Show DIV1
<Br />
<input id="inp1" onclick="ToggleVisibility('div2', this);" type="checkbox" checked="true" /> Show DIV2
<br/>
 
 
<div id="div1" style="background-color:#aaaaaa;font-size:20pt;">
Hello World1!
</div>
 
 
<div id="div2" style="background-color:#aaaaaa;font-size:20pt;">
Hello World2!
</div>
 
<script>
 
function ToggleVisibility(whichDiv, obj){
    
	
   	if (obj.checked){
 
   		document.getElementById(whichDiv).style.display = "block";
 
	}else{
 
   		document.getElementById(whichDiv).style.display = "none";		
 
	}
 
}
 
</script>
 
 
</body>
</html>

Open in new window

0
 
zemondCommented:
Code revision
<html>
<body>
 
<input id="inp1" onclick="ToggleVisibility('div1', this);" type="checkbox" checked="true" /> Show DIV1
<Br />
<input id="inp2" onclick="ToggleVisibility('div2', this);" type="checkbox" /> Show DIV2
<br/>
<input id="inp3" onclick="ToggleVisibility('div2', this);" type="checkbox" /> Show DIV3
<br/>
 
<div id="div1" style="background-color:#aaaaaa;font-size:20pt;">
Hello World1!
</div>
 
<div id="div2" style="background-color:#aaaaaa;font-size:20pt; display:none;">
Hello World2!
</div>
 
<div id="div3" style="background-color:#aaaaaa;font-size:20pt; display:none;">
Hello World3!
</div>
 
<script>
 
function ToggleVisibility(whichDiv, obj){
 
	inp = ['inp1', 'inp2', 'inp3'];
	objs= ['div1', 'div2', 'div3'];
    
	for(i=0; i<inp.length; i++){
 
		if (document.getElementById(inp[i]).id == obj.id){
 
			document.getElementById(whichDiv).style.display = "block";
 
		}else{
 
			document.getElementById(objs[i]).style.display = "none";
			document.getElementById(inp[i]).checked = false;
		
		}
		
 
	}
 
 
}
 
</script>
 
 
</body>
</html>

Open in new window

0
 
zemondCommented:
If you can only have 1 visible at a time, might be better to use a radio group
0
 
hutmasterxAuthor Commented:
Many thanks for your prompt help, worked perfectly.
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now