¿Cómo usar imágenes para casillas de verificación usando CSS o puede ser JavaScript?

Obviamente es una pregunta muy simple, pero nunca he hecho tal cosa antes. Mi diseñador desea algo como esto para las casillas de verificación (está en el lado izquierdo. Las marcadas son grises y otras blancas).

introduzca la descripción de la imagen aquí

Una idea es usar un intervalo con imagen de fondo (cuadro vacío), ocultar una checkbox relacionada y asignar un controlador de clic al intervalo (onclick: cambiar el atributo marcado de la checkbox oculta relacionada, cambiar la imagen de fondo del intervalo en consecuencia).

Aquí hay un ejemplo de eso.

Para este tipo de cosas yo uso jQuery UI. Un ejemplo está aquí: http://jqueryui.com/demos/button/#checkbox

y algún código de ejemplo:

 

Pruebe este enlace Casillas de verificación de estilo y botones de radio con CSS y JavaScript . No usa jQuery UI.