I think you only need CSS and some images to achieve this.
You need a container and inside that container a checkbox and a label
Set the Style property of the container to CheckBox
Set the Input Widget property of the label to the Name of the CheckBox
Put the Label to the right of the check box and set it's value to a blank i.e. ""
Here's the CSS. Note that we are storing the images that look like a checked check box and an unchecked check box in a sprite . you have to replace the background with your own images
/*hide all the check boxes within a div that has class CheckBox*/
.CheckBox input[type=checkbox] { display: none !important; }
/* style the label that's displayed instead of the ckeck box to look like a checkbox*/
.CheckBox input[type=checkbox] + span + label { cursor: pointer; padding-left: 25px; padding-right: 3x; padding-top: 3px; padding-bottom: 3px; background-repeat: no-repeat; display: inline-block; background: url("/GlobalTheme/img/Form_icons.png") no-repeat 0 -520px; height: 22px; }
/* show the checkbox image when check box is checked*/ .CheckBox input[type=checkbox]:checked + span + label { background: url("/GlobalTheme/img/Form_icons.png") no-repeat 0 -440px; }
Fabian