check box with js

{ May 13, 2008 @ 12:00 pm } · { Uncategorized }
{ } 

<html >
<head>
<title>checkbox as radio buttons (for Div Selection) by MzM [ moazzam.humayun@gmail.com]</title>

<script type="text/javascript" >
	function SwitchToDiv(divNoToSwitch)
	{
		 chckboxName = 'chkbox' + divNoToSwitch;

		var chckBox = document.getElementById(chckboxName)

		if ( chckBox.checked)
		{
			for ( i =1; i<=4; i++)
			{	

				chckBoxtoDisable = document.getElementById('chkbox' + i);
				chckBoxtoDisable.checked = false;
				if 	( i == divNoToSwitch)
				{
					dvName = 'div' + divNoToSwitch;
					var Dv = document.getElementById(dvName);
					Dv.style.display = "block";

					chckBoxtoenable = document.getElementById('chkbox' + i);
					chckBoxtoenable.checked = true;
				}
				else
				{
					var Dv2 = document.getElementById('div' + i);
					Dv2.style.display = "none";
				}
			}
		}
		else
		{
			for ( j =1; j<=4; j++)
			{
				var Dvj = document.getElementById('div' + j);
					Dvj.style.display = "none";
			}
		}
	}
</script>

</head>

<body>
<form id="form1" runat="server">
<input type="checkbox" onclick="SwitchToDiv('1')" checked  id="chkbox1"    />
check box 1
<input type="checkbox" onclick="SwitchToDiv('2')"   id="chkbox2"    />
check box 2
<input type="checkbox" onclick="SwitchToDiv('3')"   id="chkbox3"    />
check box 3
<input type="checkbox" onclick="SwitchToDiv('4')"   id="chkbox4"    />
check box 4
<div id="div1" style="display:block" >Div 1</div>
<div id="div2" style="display:none" >Div 2</div>
<div id="div3" style="display:none" >Div 3</div>
<div id="div4" style="display:none" >Div 4</div>
</form>
</body>
</html>

Leave a Comment