Menu
So the following code hides/shows fields in a form when radio buttons are clicked, the problem is on the same form I have a checkbox and when said check box is selected the showing and hiding of the fields doesn’t work, any ideas? Thank you very much!
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<style type=”text/css”>
.showHideDivs {
display: none
}
</style>
<script type=”text/javascript”>
function showHideDivs(){
var job = ”;
for(i=0; i < oRadBtns.length; i++){
if(oRadBtns[i].checked){
job = oRadBtns[i].value;
}
}
switch (job){
case ‘yes’:
document.getElementById(“nombre”).style.display = “none”;
document.getElementById(“apellido”).style.display = “none”;
document.getElementById(“empresa”).style.display = “block”;
document.getElementById(“contacto”).style.display = “block”;
break;
case ‘no’:
document.getElementById(“nombre”).style.display = “block”;
document.getElementById(“apellido”).style.display = “block”;
document.getElementById(“empresa”).style.display = “none”;
document.getElementById(“contacto”).style.display = “none”;
}
}
window.onload=function(){
oRadBtns = document.getElementById(‘radBtnCont’).getElementsByTagName(‘input’);
for(i=0; i < oRadBtns.length; i++){
oRadBtns[i].onclick = showHideDivs;
}
showHideDivs();
}
</script>
</head>
<body>
<div id=”radBtnCont”>
<input type=”radio” value=”yes” name=”job” checked=”checked” />Yes
<br />
<input type=”radio” value=”no” name=”job” />No
</div>
<div id=”nombre” class=”showHideDivs”>This is nombre div</div>
<div id=”apellido” class=”showHideDivs”>This is apellido div</div>
<div id=”empresa” class=”showHideDivs”>This is empresa div</div>
<div id=”contacto” class=”showHideDivs”>This is contacto div</div>
</body>
</html>