Un piccolo plugin per personalizzare le checkbox dei form.
Sostituisce le checkbox in input type="hidden" e applica le classi checked e unchecked alla label della checkbox.
$.fn.styleCheckbox = function () {
$(":checkbox").each ( function() {
var nome=$(this).attr('id');
var etichetta = $("label[for='"+nome+"']");
var moo = $('<input type="hidden" value="" name="' + this.name + '" id="'+nome+'"/>');
if (this.checked) {
$(etichetta).addClass("checked");
moo.attr('value','on');
} else {
$(etichetta).addClass("unchecked");
}
$(this).before(moo).remove();
$(etichetta).click( function() {
if(moo.attr('value') == ''){
val = 'on';
} else {
val = '';
}
moo.attr('value',val);
$(this).toggleClass("checked").toggleClass('unchecked');
})
});
}
Si attiva alla caricamento della pagina con
$(document).ready(function(){
$('#contatti').styleCheckbox();
});
Vanno poi applicati i fogli di stile, ad esempio
#checkbox {
width:auto;
cursor:pointer;
}
#checkbox .unchecked {
background:transparent url(images/check_off.png) no-repeat left bottom;
padding:0 0 0 18px;
}
#checkbox .checked {
background:transparent url(images/check_on.png) no-repeat left bottom;
padding:0 0 0 18px;
}