Pretty Checkboxes con Jquery

El formulario

<form>
<fieldset>
<legend>Choose some stuff...</legend>
<ul class="checklist">
<li>
<input id="choice_a" name="jqdemo" value="value1" type="checkbox">
<label for="choice_a">Here's the 1st selection</label>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a></li>
<li>
<input id="choice_b" name="jqdemo" value="value2" type="checkbox">
<label for="choice_b">Here's the 2nd selection</label>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a></li>
<li>
<input id="choice_c" checked="checked" name="jqdemo" value="value3" type="checkbox">
<label for="choice_c">Here's the 3rd selection</label>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a></li>
<li>
<input id="choice_d" name="jqdemo" value="value4" type="checkbox">
<label for="choice_d">Here's the 4th selection</label>
<a class="checkbox-select" href="#">Select</a>
<a class="checkbox-deselect" href="#">Cancel</a></li>
</ul>

<button class="sendit" title="Submit the form">Send it!</button>
</fieldset>
</form>

El CSS

legend {
font-size: 17px;
}

fieldset {
border: 0;
}

.checklist {
list-style: none;
margin: 0;
padding: 0;
}

.checklist li {
float: left;
margin-right: 10px;
background: url(i/checkboxbg.gif) no-repeat 0 0;
width: 105px;
height: 150px;
position: relative;
font: normal 11px/1.3 "Lucida Grande","Lucida","Arial",Sans-serif;
}

.checklist li.selected {
background-position: -105px 0;
}

.checklist li.selected .checkbox-select {
display: none;
}

.checkbox-select {
display: block;
float: left;
position: absolute;
top: 118px;
left: 10px;
width: 85px;
height: 23px;
background: url(i/select.gif) no-repeat 0 0;
text-indent: -9999px;
}

.checklist li input {
display: none;
}

a.checkbox-deselect {
display: none;
color: white;
font-weight: bold;
text-decoration: none;
position: absolute;
top: 120px;
right: 10px;
}

.checklist li.selected a.checkbox-deselect {
display: block;
}

.checklist li label {
display: block;
text-align: center;
padding: 8px;
}

.sendit {
display: block;
float: left;
top: 118px;
left: 10px;
width: 115px;
height: 34px;
border: 0;
cursor: pointer;
background: url(i/sendit.gif) no-repeat 0 0;
text-indent: -9999px;
margin: 20px 0;
}

Código JQuery

$(document).ready(function() {

/* see if anything is previously checked and reflect that in the view*/
$(".checklist input:checked").parent().addClass("selected");

/* handle the user selections */
$(".checklist .checkbox-select").click(
function(event) {
event.preventDefault();
$(this).parent().addClass("selected");
$(this).parent().find(":checkbox").attr("checked","checked");

}
);

$(".checklist .checkbox-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":checkbox").removeAttr("checked");

}
);

});
});

Imagenes
Ejemplo online