Hello guys,

I have 3 radio buttons and some check boxes under each radio button.My task is, when the user clicks on any of the radio button,remaining radio buttons and checkboxes should not visible / hide.Here is my code.i do not know where I did mistake.I am not able to get the right output.Please help me.






<html>
<script type="text/javascript" language=javascript>
function display() {
if (document.getElementById('R').checked == true) {
document.getElementById('F').style.visibility = 'hidden';
document.getElementById('D').style.visibility = 'hidden';
document.getElementById('E').style.visibility = 'hidden';
} else if (document.getElementById('F').checked == true) {
document.getElementById('R').style.visibility = 'hidden';
document.getElementById('E').style.visibility = 'hidden';
document.getElementById('D').style.visibility = 'hidden';
} else if (document.getElementById('E').checked == true) {
document.getElementById('F').style.display = "hidden";
document.getElementById('R').style.display = "hidden";
document.getElementById('D').style.display = "hidden";
} else if (document.getElementById('D').checked == true) {
document.getElementById('F').style.display = "hidden";
document.getElementById('R').style.display = "hidden";
document.getElementById('E').style.display = "hidden";
}
}
</script>

<body bgcolor="green">
<center>
<form action="CreditCardForm.jsp">
<table width="100" height="500">
<tbody>
<tr>
<td>Industry:</td>
</tr>
<tr>
<td align="justify"><br>
<div id="R">
<input type="radio" name="group1" value="Retail"
align="middle" onselect="display();">Retail<br>
<pre>
<input type="checkbox" name="group1" value="cr"
align="right">PARTIAL AUTH <br>
<input type="checkbox" name="group1" value="cr"
align="right">CVV2 <br>
<input type="checkbox" name="group1" value="cr"
align="right">CUSTOMER ZIP <br>
<input type="checkbox" name="group1" value="cr"
align="right">Retail <br>
</pre>
</div>
<div id="F">
<input type="radio" name="group1" value="restaurant"
align="middle" onclick="display();">Restaurant<br>
<pre>
<input type="checkbox" name="group1" value="cr"
align="right">Retail <br>
<input type="checkbox" name="group1" value="cr"
align="right">Retail <br>
<input type="checkbox" name="group1" value="cr"
align="right">Retail <br>
<input type="checkbox" name="group1" value="cr"
align="right">Retail <br>
</pre>
</div>
<div id="D">
<input type="radio" name="group1" value="crr" align="middle"
onclick="display();">DirectMarketing<br>
<pre>
<input type="checkbox" name="group1" value="cr"
align="right">CAVV <br>
<input type="checkbox" name="group1" value="cr"
align="right">RECURRING <br>
<input type="checkbox" name="group1" value="cr"
align="right">INSTALLMENT <br>
<input type="checkbox" name="group1" value="cr"
align="right">BILLPAY <br>
</pre>
</div>
<div id="E">
<input type="radio" name="group1" value="cr" align="middle"
onclick="display();">Ecommerce<br>
<pre>
<input type="checkbox" name="group1" value="cr"
align="right">CAVV <br>
<input type="checkbox" name="group1" value="cr"
align="right">RECURRING <br>
<input type="checkbox" name="group1" value="cr"
align="right">INSTALLMENT <br>
<input type="checkbox" name="group1" value="cr"
align="right">BILLPAY <br>
</pre>
</div></td>

</tr>
</tbody>
</table>
<input type="submit">
</form>
</center>
</body>
</html>