ajgraham.com » Checkbox http://www.ajgraham.com web design, development and consultation in Prague Fri, 02 Jul 2010 21:55:51 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 XHTML and JavaScript checkbox colour change http://www.ajgraham.com/2009/10/xhtml-and-javascript-checkbox-colour-change/ http://www.ajgraham.com/2009/10/xhtml-and-javascript-checkbox-colour-change/#comments Sun, 18 Oct 2009 22:48:09 +0000 alex http://www.ajgraham.com/?p=109 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

]]> http://www.ajgraham.com/2009/10/xhtml-and-javascript-checkbox-colour-change/feed/ 0