Hi,

I have created the following script which allows nested 'checkbox' selection. However, whilst it works perfectly in Firefox, it does not work correctly in IE.

When I select 'All Categories' all the 'checkboxes' are selected (this is what should happen) but if I select it again nothing happens (it should unselect all 'checkboxes'). No errors are given.

Please find my code below and example.zip attached which contains my source and the necessary images:
Code:
<html>
<head>
<script type="text/javascript">
	var selectedCategories = '';
	var flag = false;
	var categories=[['id00001',''],['id00002','id00001'],['id00003','id00001'],['id00004','id00003'],['id00005','id00003'],['id00006','id00003'],['id00007','id00003'],['id00008','id00001'],['id00009','id00001'],['id00010','id00001']];

	function category(id)
	{
		if(document.getElementById(id).getAttribute('src') != 'on.png')
		{
			document.getElementById(id).setAttribute('src','on.png');
			selectedCategories = selectedCategories + ',' + id;
			selectChild(id);
			selectParent(id);
		}
		else
		{
			document.getElementById(id).setAttribute('src','off.png');
			selectedCategories = selectedCategories.replace(',' + id,'');
			unselectChild(id);
			unselectParent(id);
		}
	}

	function getChild(id)
	{
		var children = '';
		for(var x = 0; x < categories.length; x++)
		{
			if(categories[x][1] == id)
			{
				if(children == '')
				{
					children = children + categories[x][0];
				}
				else
				{
					children = children + ',' + categories[x][0];
				}
			}
		}
		return children;
	}

	function getParent(id)
	{
		var parent = '';
		for(var x = 0; x < categories.length; x++)
		{
			if(categories[x][0] == id)
			{
				parent = categories[x][1];
			}
		}
		return parent;
	}

	function selectChild(id)
	{
		if(getChild(id) != '')
		{
			var children = getChild(id).split(',');
			for(var x = 0; x < children.length; x++)
			{
				document.getElementById(children[x]).setAttribute('src','on.png');
				selectedCategories = selectedCategories + ',' + children[x];
				selectChild(children[x]);
			}
		}
	}

	function selectParent(id)
	{
		if(getParent(id) != '')
		{
			var parent = getParent(id);
			var children = getChild(parent).split(',');
			var flag = true;
			for(var x = 0; x < children.length; x++)
			{
				if(document.getElementById(children[x]).getAttribute('src') != 'on.png')
				{
					flag = false;
				}
			}
			if(flag)
			{
				document.getElementById(parent).setAttribute('src','on.png');
			}
			else
			{
				document.getElementById(parent).setAttribute('src','part.png');
			}
			selectedCategories = selectedCategories + ',' + parent;
			selectParent(parent);
		}
	}

	function unselectChild(id)
	{
		if(getChild(id) != '')
		{
			var children = getChild(id).split(',');
			for(var x = 0; x < children.length; x++)
			{
				document.getElementById(children[x]).setAttribute('src','off.png');
				selectedCategories = selectedCategories.replace(',' + children[x],'');
				unselectChild(children[x]);
			}
		}
	}

	function unselectParent(id)
	{
		if(getParent(id) != '')
		{
			var parent = getParent(id);
			var children = getChild(parent).split(',');
			var flag = false;
			for(var x = 0; x < children.length; x++)
			{
				if(document.getElementById(children[x]).getAttribute('src') != 'off.png')
				{
					flag = true;
				}
			}
			if(!flag)
			{
				document.getElementById(parent).setAttribute('src','off.png');
			}
			else
			{
				document.getElementById(parent).setAttribute('src','part.png');
			}
			selectedCategories = selectedCategories.replace(',' + parent,'');
			unselectParent(parent);
		}
	}
</script>
</head>
<body>
<ul>
	<li>All Categories <img id="id00001" src="off.png" onClick="category('id00001');"></li>
	<ul>
		<li>Electronics <img id="id00002" src="off.png" onClick="category('id00002');"></li>
		<li>Gaming <img id="id00003" src="off.png" onClick="category('id00003');"></li>
		<ul>
			<li>PS3 <img id="id00004" src="off.png" onClick="category('id00004');"></li>
			<li>Xbox 360 <img id="id00005" src="off.png" onClick="category('id00005');"></li>
			<li>Wii <img id="id00006" src="off.png" onClick="category('id00006');"></li>
			<li>PC <img id="id00007" src="off.png" onClick="category('id00007');"></li>
		</ul>
		<li>Audio <img id="id00008" src="off.png" onClick="category('id00008');"></li>
		<li>Motoring <img id="id00009" src="off.png" onClick="category('id00009');"></li>
		<li>Books <img id="id00010" src="off.png" onClick="category('id00010');"></li>
	</ul>
</ul>
</body>
</html>