PDA

View Full Version : 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…..


<!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.
:rolleyes:

keyboard
02-24-2012, 03:59 AM
<!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

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.