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="https://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