Forms

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’);

/*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’).addClass(‘checked’);
else
$(‘span.footage-checkbox’).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" />
<!–>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<!–>
<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’);

/*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’).addClass(‘checked’);
else
$(‘span.footage-checkbox’).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>