Hace poco tube que hacer algo parecido, por cuestion de diseño no quedaban bien los checkbox por defecto (como sera posible que hoy en dia sigan si poder maquetarse con css, ni siquiera css3
).
Rebuscando encontre por ahi una solucion que me parecio bastante interesante, y que quiero compartir contigo, pues quizas te sirva tanto como a mi (o a cualquier otro que llege hasta aqui)
basicamente la idea es jugar con los propios checkbox y no con otros elementos.
A cada checkbox le pones un div con clase que tenga el background-image para incluirle el diseño que quieras
Luego añades al checkbox display:block con un tamaño igual que del contenedor (para que lo ocupe todo) y le pones con javascript opacidad a 0 (el mismo hide() de jquery te puede servir).
Por ultimo con javascript cada vez que hagas click al checkbox, cambias la clase del contenedor que lo contiene. Con esta otra clase, lo que harias seria cambiar el background-image, por otra que sea con el diseño del checkbox marcado. (te recomiendo un sprite para esto).
Quizas sea un poquito mas laborio que la otra forma, pero usas directamente los checkbox, por lo tanto a la hora de trabajar con ellos te sera mas comodo, ademas de que un usuario con javascript desactivado, podra seguir completando el formulario (por eso es importante que la opacidad se la añadas con javascript).
Espero que te sirva.