Code works in Firefox but not in IE

**vouzamo** · 04-01-2009 07:29 AM

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>

Thread: Code works in Firefox but not in IE

Thread Tools

Display

Threaded View

Code works in Firefox but not in IE

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions