Show/Hide works on a check box.. Trying for a radio button also...

**mitchmalis** · 02-23-2012, 07:44 PM

This code below works great when checking a checkbox for whatever you have in a <div> tag to appear and then disappear when unchecking again. My question is does anyone understand how to get it to do this on a radio button? It does not disappear when unchecking the radio button…..

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript"> 

function showMe (it, box) { 
var vis = (box.checked) ? "block" : "none"; 
document.getElementById(it).style.display = vis; 
} 
function showMe2 (it) { 
var vis = document.getElementById(it).style.display 
if (vis == "block") { document.getElementById(it).style.display = "none"; } 
else { document.getElementById(it).style.display = "block"; } 
} 

</script>
<style type="text/css">

.divstyle
{
display: none;
border: 1px solid #000;
height: 100px;
width: 200px;
}

</style>
</head>

<body>
<p>
<input type="checkbox" onclick="showMe('div1', this)" /> 
show div 1
<input type="checkbox" onclick="showMe('div2', this)" />
show div 2
<input type="checkbox" onclick="showMe('div3', this)" />
show div 3
<input type="checkbox" onclick="showMe('div4', this)" />
show div 4</p>
<div class="divstyle" id="div1">Content div1</div>
<div class="divstyle" id="div2">Content div2</div>
<div class="divstyle" id="div3">Content div3</div>
<div class="divstyle" id="div4">Content div4</div>

</body>
</html>

The above code is awesome. I am using it and tried on radio buttons, but when you uncheck the radio button the hidden stays there, thus does not hide. Does anyone know how to get it to work properly on a radio on check and uncheck? Thanks this is actually very complicated.

**keyboard** · 02-24-2012, 03:59 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"> 
function showMe (it, hide1, hide2, hide3, box) { 
document.getElementById(it).style.display = "block"; 
document.getElementById(hide1).style.display = "none"; 
document.getElementById(hide2).style.display = "none"; 
document.getElementById(hide3).style.display = "none"; 
} 
function showMe2 (it) { 
var vis = document.getElementById(it).style.display 
if (vis == "block") { document.getElementById(it).style.display = "none"; } 
else { document.getElementById(it).style.display = "block"; } 
} 
</script>
<style type="text/css">
.divstyle
{
display: none;
border: 1px solid #000;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<p>
<input type="radio" name="radio1" onclick="showMe('div1', 'div2', 'div3', 'div4', this)" /> 
show div 1
<input type="radio" name="radio1" onclick="showMe('div2', 'div3', 'div4', 'div1', this)" />
show div 2
<input type="radio" name="radio1" onclick="showMe('div3', 'div4', 'div1', 'div2', this)" />
show div 3
<input type="radio" name="radio1" onclick="showMe('div4', 'div1', 'div2', 'div3', this)" />
show div 4</p>
<div class="divstyle" id="div1">Content div1</div>
<div class="divstyle" id="div2">Content div2</div>
<div class="divstyle" id="div3">Content div3</div>
<div class="divstyle" id="div4">Content div4</div>
</body>
</html>

Tested in IE9

Keyboard1333

Edit: NOTE:

function showMe2 (it) { var vis = document.getElementById(it).style.display if (vis == "block") { document.getElementById(it).style.display = "none"; } else { document.getElementById(it).style.display = "block"; } }

Isn't doing anything, so you can delete it.

Thread: Show/Hide works on a check box.. Trying for a radio button also...

Thread Tools

Search Thread

Show/Hide works on a check box.. Trying for a radio button also...

Bookmarks

Bookmarks

Posting Permissions