Check Box personalizados express gracias a jQuery

Hola que tal a todos, pues la verdad no había tenido tiempo de escribir en mi blog, y ahorita que tengo un pequeño tiempo libre he decidido invertirle unos minutos, en esta ocasión hablaré de cómo hacer un checkbox personalizado; Como en muchas veces el cliente habla de más y dice “Quiero que los checkbox se vean bonitos”, lo que implica un poco de trabajo extra, con este pequeño ejemplo y gracias a jQuery esto será cosa de unos minutos.

Lo primero que necesitamos es una imágen que agregar ( ya que como sabemos el checkbox como tal no es estilizable ), yo siempre recomiendo que los dos estados del checkbox se encuentren en el mismo archivo, para evitar volver a cargar la imágen y por un segundo la pimera vez se vea la ausencia de esta.

En este caso yo usaré esta imágen , la cual tiene unas dimensiones de 15×29 ( imágen diseñada por ACIDminds )

Suponiendo que tenemos un html de esta forma.

<form  id="form-1" method="post" action="action.php">
            <fieldset>
                <legend>Elige parientes</legend>
                <ul>
                    <li>
                        <input type="checkbox" name="animales" id="animales1" value="perro" />
                        <label for="animales1">Perro</label>
                    </li>
                    <li>
                        <input type="checkbox" name="animales" id="animales2" value="gato" />
                        <label for="animales2">Gato</label>
                    </li>
                    <li>
                        <input type="checkbox" name="animales" id="animales3" value="conejo" />
                        <label for="animales3">conejo</label>
                    </li>
                    <li>
                        <input type="checkbox" name="animales" id="animales4" value="caballo" />
                        <label for="animales4">Caballo</label>
                    </li>
                    <li>
                        <input type="checkbox" name="animales" id="animales5" value="Burro" class="uncheckeable" />
                        <label for="animales5">Burro</label>
                    </li>
                </ul>
            </fieldset>
        </form>

Lo primero que necesitamos es hacer estilos a manera que sepamos como queremos que queden acomodado nuestro formulario.

            #form-1{
                font-family: Verdana, Arial;
            }

            #form-1 legend{
                font-size: 20px;
                padding: 5px 10px;
            }

            #form-1 ul {
                float: left;
                width: 310px;
            }

            #form-1 li{
                float: left;
                list-style: none;
                padding: 5px 0;
                width: 50%;
            }

            #form-1 li input{
                float: left;
                height: auto;
                margin-right: 3px;
                vertical-align: middle;
                width: auto;
            }

            #form-1 label{
                clear: none;
                display: inline-block;
                float: left;
                height: auto;
                vertical-align: middle;
                width: auto;
                zoom: 1;
                *display: inline;
            }

Quedando de la siguiente manera:

Lo siguiente es etener los estilos del elementos que actuarán como nuestros checkbox.

           /**
            * Se comienza a asignar el tamaño que se quiere que tenga el checkbox Falso así como la imágen que lo tendrá
            */
            #form-1 .footage-checkbox {
                background: url("http://edmundoretama.com/imagenes/Ratio_Btn.jpg") no-repeat scroll 0 0 transparent;
                cursor: pointer;
                display: block;
                float: left;
                height: 14px;
                margin-right: 6px;
                width: 15px;
            }

            /*
            * Es aquí donde a manera de sprite cuando el checkbox ficticio tenga la clase "checked" solo se recorrerá la imágen hacia arriba para dar el aspecto deseado
            */
            #form-1 .footage-checkbox.checked {
                background-position: 0 -15px !important;
            }

Ahora imaginense estar asignando a todos los ckeckbox, por eso esta acción se realizará por javascript con las siguientes líneas gracias a jQuery.

            /*Cuando el DOM esté listo*/
            $(document).ready( function(){
                //se obtienen en este caso todos los elementos de tipo checkbox que se encuentren
                checkButtons = $('input[type="checkbox"]');

                /*En donde se encuentre algún checkbox este se ocultará, y al mismo tiempo se creará un elemento span, con la clase del checkbox false*/
                checkButtons.each( function(){
                    $(this).after('<span rel="' + this.id + '" class="footage-checkbox"></span>').css('display','none');
                });

                checkButtons.change( function(){
                    /*primero se compara en el evento change el estado que se encuentre para convertirlo en el opuesto*/
                    this.checked = ( this.checked ) ? false:true;

                    //dependiendo del estado del se asigna o se elimin
                    if( this.checked )
                        $('span.footage-checkbox[rel="' + this.id + '"]').addClass('checked');
                    else
                        $('span.footage-checkbox[rel="' + this.id + '"]').removeClass('checked');
                });

                //aquí mandamos hacempos que al darle click al checkbox ficticio , cambie el real
                $('span.footage-checkbox').click( function(){
                    tempChk = $('input#'+$(this).attr('rel')).change();
                });

                //aqui se asigna el cambio del estado de los checkbox en el label, para respetar la semántica de este
                $('label').click( function(){
                    tempChk = $('input#'+$(this).attr('for')).change();
                });

            });

dejándonos finalmente algo como esto:

Quedando nuestro html final algo como esto:

<!DOCTYPE html>
<html>
    <head>
        <title>Checkbox</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!--[if lt IE 9]>
        <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            /*Cuando el DOM esté listo*/
            $(document).ready( function(){
                //se obtienen en este caso todos los elementos de tipo checkbox que se encuentren
                checkButtons = $('input[type="checkbox"]');

                /*En donde se encuentre algún checkbox este se ocultará, y al mismo tiempo se creará un elemento span, con la clase del checkbox false*/
                checkButtons.each( function(){
                    $(this).after('<span rel="' + this.id + '" class="footage-checkbox"></span>').css('display','none');
                });

                checkButtons.change( function(){
                    /*primero se compara en el evento change el estado que se encuentre para convertirlo en el opuesto*/
                    this.checked = ( this.checked ) ? false:true;

                    //dependiendo del estado del se asigna o se elimin
                    if( this.checked )
                        $('span.footage-checkbox[rel="' + this.id + '"]').addClass('checked');
                    else
                        $('span.footage-checkbox[rel="' + this.id + '"]').removeClass('checked');
                });

                //aquí mandamos hacempos que al darle click al checkbox ficticio , cambie el real
                $('span.footage-checkbox').click( function(){
                    tempChk = $('input#'+$(this).attr('rel')).change();
                });

                //aqui se asigna el cambio del estado de los checkbox en el label, para respetar la semántica de este
                $('label').click( function(){
                    tempChk = $('input#'+$(this).attr('for')).change();
                });

            });
        </script>

        <style type="text/css">
            /*Se le asigna a todo el form un estilo de fuente Verdana*/
            #form-1{
                font-family: Verdana, Arial;
            }

            #form-1 legend{
                font-size: 20px;
                padding: 5px 10px;
            }

            #form-1 ul {
                float: left;
                width: 310px;
            }

            #form-1 li{
                float: left;
                list-style: none;
                padding: 5px 0;
                width: 50%;
            }

            #form-1 li input{
                float: left;
                height: auto;
                margin-right: 3px;
                vertical-align: middle;
                width: auto;
            }

            #form-1 label{
                clear: none;
                display: inline-block;
                float: left;
                height: auto;
                vertical-align: middle;
                width: auto;
                zoom: 1;
                *display: inline;
            }

            /**
            * Se comienza a asignar el tamaño que se quiere que tenga el checkbox Falso así como la imágen que lo tendrá
            */
            #form-1 .footage-checkbox {
                background: url("http://edmundoretama.com/imagenes/Ratio_Btn.jpg") no-repeat scroll 0 0 transparent;
                cursor: pointer;
                display: block;
                float: left;
                height: 14px;
                margin-right: 6px;
                width: 15px;
            }

            /*
            * Es aquí donde a manera de sprite cuando el checkbox ficticio tenga la clase "checked" solo se recorrerá la imágen hacia arriba para dar el aspecto deseado
            */
            #form-1 .footage-checkbox.checked {
                background-position: 0 -15px !important;
            }

        </style>

    </head>
    <body>
        <form  id="form-1" method="post" action="action.php">
            <fieldset>
                <legend>Elige parientes</legend>
                <ul>
                    <li>
                        <input type="checkbox" name="animales" id="animales1" value="perro" />
                        <label for="animales1">Perro</label>
                    </li>
                    <li>
                        <input type="checkbox" name="animales" id="animales2" value="gato" />
                        <label for="animales2">Gato</label>
                    </li>
                    <li>
                        <input type="checkbox" name="animales" id="animales3" value="conejo" />
                        <label for="animales3">conejo</label>
                    </li>
                    <li>
                        <input type="checkbox" name="animales" id="animales4" value="caballo" />
                        <label for="animales4">Caballo</label>
                    </li>
                    <li>
                        <input type="checkbox" name="animales" id="animales5" value="Burro" class="uncheckeable" />
                        <label for="animales5">Burro</label>
                    </li>
                </ul>
            </fieldset>
        </form>
    </body>
</html>

Tags: Checkbox, checkbox personalizado, formulario, jQuery, jQuery Checkbox, personalizar checkbox

This entry was posted on 25 Julio, 2011 at 18:31 and is filed under Forms, jQuery. You can follow any responses to this entry through the RSS 2.0 feed.