XHTML and JavaScript checkbox colour change

I wrote a very simple little piece of JavaScript that changes the colour, background colour and font colour of a checkbox depending on the Mouse Event (onclick, onmouseover and onmouseout) and whether the checkbox is ticked or not. It can also reset it back to its previous settings too.

XHTML:

<label for="cb1" id="lb1" onclick="mouseToggle('cb1', 'lb1', '#000', '#fff', '#cccccc', '#000000', true)" onmouseover="mouseToggle('cb1', 'lb1', '#000', '#fff', '#cccccc', '#000000', true)" onmouseout="mouseToggle('cb1','lb1','#000','#fff','#cccccc','#000000', false)">
<input type="checkbox" name="test" value="Test Checkbox1" id="cb1"/>Test Checkbox1</label>

JavaScript:

function mouseToggle(checkbox,label,bgcolour,fontcolour,bgreset,fontreset,mouseIn){
	if(document.getElementById)
	{
		var cb = document.getElementById(checkbox);
		var label = document.getElementById(label);
		if(cb.checked == false)
		{
			if( mouseIn == true )
			{
				label.style.backgroundColor = bgcolour;
				label.style.color = fontcolour;
			}
			else
			{
				label.style.backgroundColor = bgreset;
				label.style.color = fontreset;
			}
		}
	}
}

Example:

Demo of functionality

Something similar was used for http://www.howdenparkcentre.co.uk

blog comments powered by Disqus