<html>
<head>
<title>Example</title>
<style type="text/css">
.checkboxDiv { display: none; }
</style>
<script type="text/javascript">
window.onload = initForm;
/*
attach all the javascript onclick events to the inputs
that have a class that contains 'radio'
*/
function initForm()
{
var l_pInputs = document.getElementsByTagName('INPUT');
for (var loop=0, max=l_pInputs.length; loop<max; loop++)
{
if (l_pInputs[loop].className.indexOf('radio') > -1)
{
l_pInputs[loop].onclick = showCheckbox;
}
}
}
/*
hide all the divs with a class that contains 'checkboxDiv'
*/
function hideCheckboxes()
{
var l_pDivs = document.getElementsByTagName('DIV');
for (var loop=0, max=l_pDivs.length; loop<max; loop++)
{
if (l_pDivs[loop].className.indexOf('checkboxDiv') > -1)
{
l_pDivs[loop].style.display = 'none';
}
}
}
/*
hide all the divs via hideCheckboxes() and then show the
div associated with the radio button that was clicked
*/
function showCheckbox()
{
hideCheckboxes();
var l_sDivToShowId = this.id.replace('carrier','chkboxes');
document.getElementById(l_sDivToShowId).style.display = 'block';
}
</script>
</head>
<body>
<form action="">
<fieldset>
<div>
<input type="radio" name="carrier" value="land" id="carrier_land" class="radio">
<label for="carrier_land">Land</label>
<div id="chkboxes_land" class="checkboxDiv">
<strong>LAND CHECKBOXES</strong>
</div>
</div>
<div>
<input type="radio" name="carrier" value="surface" id="carrier_surface" class="radio">
<label for="carrier_surface">Surface</label>
<div id="chkboxes_surface" class="checkboxDiv">
<strong>SURFACE CHECKBOXES</strong>
</div>
</div>
<div>
<input type="radio" name="carrier" value="sea" id="carrier_sea" class="radio">
<label for="carrier_sea">Sea</label>
<div id="chkboxes_sea" class="checkboxDiv">
<strong>SEA CHECKBOXES</strong>
</div>
</div>
</fieldset>
</form>
</body>
</html>
