Estilar nuestros checkbox en formularios se puede hacer facil usando jQuery. Partiendo de una lista de opciones en formato HTML, un SPRITE para el rollover del estado del checkbox y un poquito de código en jQuery y ya podremos tener unos checkbox de lo mas originales para todos los formularios que desemos utilizar. Con un poquito de imaginación y retocando el sprite y la hoja de estilos podremos darle otra apariencia mas acorde a lo que estemos buscando.
El ejemplo en cuestión tiene dispnibles 3 set disponibles para elegir. Adjunto el PSD con el SPRITE que ha creado el autor para el intercambio de imagen cuando hacemos click en el checkbox. Podéis retocarlo a vuestro gusto o también es posible crear uno de cero tirando de imaginación.
Los métodos y eventos de JQuery que se han usado para crear este ejemplo son los siguientes:
- click(): evento usado para cuando hacemos click con el ratón.
- parent(): Consigue el padre del elemento que seleccionemos.
- addClass() y removeClass(): método muy útil en este ejemplo para asignar o remover clases.
- attr() y removeAttr(): método para conseguir o remover atributos.
- preventDefault(): alterar comportamientos.
- find(): método que nos permitirá encontrar algo en concreto.
- fadeIn() y fadeOut(): son métodos para ocultar o mostrar elementos usando transparencias.
Fuentes:
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://combinedartsmedia.com/sean/check-boxes_and_radio-buttons/
