Fancy Checkbox con CSS y jQuery

Este es un script que cambiara la apariencia de los clásicos elementos checkbox de los formularios web,
para nuestro ejemplo utilizaremos jQuery que lo llamaremos directamente de Google API.

Comenzando con el JavaScript

Primero incluiremos la librería jQuery, luego utilizaremos una función para que convierta los simples checkbox en botones seleccionables:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	
	$(".checklist input:checked").parent().addClass("selected");
	
	$(".checklist .chk-select").click(
		function(event) {
			event.preventDefault();
			$(this).parent().addClass("selected");
			$(this).parent().find(":checkbox").attr("checked","checked");
		}
	);
	
	$(".checklist .chk-deselect").click(
		function(event) {
			event.preventDefault();
			$(this).parent().removeClass("selected");
			$(this).parent().find(":checkbox").removeAttr("checked");
		}
	);
});
</script>

Trabajando el CSS

Ahora incluiremos los estilos para dar la apariencia a la lista de checkbox

<style type="text/css">
.checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.checklist li {
	float: left;
	margin-right: 10px;	
	font: normal 12px "Lucida Grande","Lucida","Arial",Sans-serif;
}
.checklist li.selected a.chk-deselect {
	display: block;
}
.checklist li.selected .chk-select {
	display: none;
}

.chk-select,a.chk-deselect{
    padding: 5px 7px;
    float: left;
    font-weight:bold;
    text-decoration:none;
}
.chk-select {
	display: block;
	background: #8DC63F;
	color: #fff;
}
a.chk-deselect{
	display: none;
	background: #eee;
    color: #8DC63F;
}

.checklist li input {
	display: none;	
}

.sendit {
	display: block;
	float: left;
	top: 118px;
	left: 10px;
	width: 115px;
	height: 34px;
	border: 0;
	cursor: pointer;
	background: #3FA2C6;	
	margin: 20px 0;
    color:#fff;
    font-weight:bold;
}

.round{  
 -webkit-border-radius: 3px;  
 -moz-border-radius: 6px;  
 -ms-border-radius: 6px;  
}  
</style>

Creando el HTML

Dentro del body generaremos una lista HTML con siguiendo esta estructura

<ul class="checklist">
    <li>
        <input name="jqdemo" value="value1" type="checkbox"/>
        <a class="chk-select round" href="#">#php</a>
        <a class="chk-deselect round" href="#">#php</a>
    </li>
    <li>
        <input name="jqdemo" value="value2" type="checkbox"/>
        <a class="chk-select round" href="#">#css</a>
        <a class="chk-deselect round" href="#">#css</a>
    </li>
    <li>
        <input name="jqdemo" value="value3" type="checkbox" checked="checked"/>
        <a class="chk-select round" href="#">#js</a>
        <a class="chk-deselect round" href="#">#js</a>
    </li>
    <li>
        <input name="jqdemo" value="value4" type="checkbox"/>
        <a class="chk-select round" href="#">#ajax</a>
        <a class="chk-deselect round" href="#">#ajax</a>
    </li>
</ul>

Ejemplo

También te puede interesar

4 Comments

  1. Seize
    abr 27, 2010 @ 01:56:08

    Como realizas si fuera necesario el inicializado de los checkbox

    • craftyman
      abr 27, 2010 @ 14:02:06

      Seize,
      Simplemente pon los checkbox en estado “checked”, el script los detectara automaticamente y dara los estilos respectivos.

      Saludos.

  2. Marco
    feb 23, 2011 @ 11:28:13

    lamentablemente Internet explorer no agarra las puntas redondeadas… existe alguna manera de que se puedan colocar redondeadas para internet explorer?

    gracias.

  3. Ayar
    sep 14, 2011 @ 12:13:38

    genio! gracias!