Imágen extraida del sitio web de prettyCheckboxes

En este post vamos a enfocarnos en los radio buttons y checkboxes, o “botones de opcion” y “casillas de verificación”… como nos guste llamarles.

He probado con varios plugins de jQuery, e incluso personalizarlos bastante, pero considero que prettyCheckboxes es uno de los más sencillos de utilizar. Para incluirlo en tu diseño solo tienes que:

1.- Importar jQuery (por supuesto) y el archivo prettyCheckboxes.js que podrás descargar de este sitio (allí encontraras ejemplos y una explicación mas detallada)

2.- Inicializar prettyCheckboxes (para todos los checkbox y radio buttons de la página):

    $(document).ready(function(){
        $('input[type=checkbox],input[type=radio]').prettyCheckboxes();
    });

O inicializarlo solo para algunos elementos de tus formularios:

    $(document).ready(function(){
        $('input.myCheckbox').prettyCheckboxes();
    });

Y eso es todo, ahora solo falta personalizar las imágenes (que descargas de la página de prettyCheckboxes para que se vean según tu diseño.