Temizzare Checkbox con JQuery

Problema iniziale

La temizzazione dell’elemento HTML Checkbox è un argomento complicato e difficile da standardizzare, a causa delle differenze esistenti tra i browser nel trattarli.

Possibile soluzione

Grazie a JQuery siamo in grado di ovviare al problema con una soluzione rapida e leggera.
L’idea è quella di nascondere il checkbox input con i fogli di stile e creare una copia che ne sostituisca la funzionalità in tutto e per tutto. Il clone che utilizzeremo sarà il tag <a>, che potrà pertanto essere completamente personalizzato via CSS.

Applicazione degli script

Dopo aver provveduto all’integrazione delle librerie necessarie, creiamo il nostro clone, facendo attenzione che l’id del vero checkbox corrisponda alla parola chiave utilizzata per il clone; nel nostro caso utilizziamo prova:

FINTO CHECKBOX: <a href=”#prova” id=”fakeprova”>Prova</a>

CHECKBOX ORIGINALE: <input id=”prova” type=”checkbox”/>

.fakecheck{
font: 11px Verdana;
text-decoration: none;
outline: none;
background: url(myimages/contattaci/checkbox.jpg) no-repeat;
height: 20px;
width: 24px;
margin-left: 82px;
display: block;
float: left;
text-decoration: underline;
padding: 5px 0px 0px 30px;
}
.fakecheck:link{
  color: #ccc;
}
.fakechecked {
background-position: left -24px;
}

.fakecheck{
font: 11px Verdana;
text-decoration: none;
outline: none;
background: url(myimages/contattaci/checkbox.jpg) no-repeat;
height: 20px;
width: 24px;
margin-left: 82px;
display: block;
float: left;
text-decoration: underline;
padding: 5px 0px 0px 30px;
color: silver;
}
.fakechecked {background-position: left -24px;}

Il file checkbox.jpg conterrà entrambe le versioni del finto checkbox: spuntata e non spuntata.

Il foglio di stile si occuperà poi di spostare l’immagine a seconda dell’intervento dell’utente sulla checkbox.

Ora siamo pronti per creare il codice JQuery necessario per allineare il nostro finto checkbox con quello reale.

<script language="javascript">
$(document).ready(function(){
 $("input:checkbox").each( function() {
   (this.checked) ? $("#fake"+this.id).addClass('fakechecked') : $("#fake"+this.id).removeClass('fakechecked');
 });
  $(".fakecheck").click(function(){
    ($(this).hasClass('fakechecked')) ? $(this).removeClass('fakechecked') : $(this).addClass('fakechecked');
    $(this.hash).trigger("click");
    return false;
  });
});
</script>

Ecco fatto. A seconda della personalizzazione, in particolare dell’immagine scelta per il checkbox, sarà necessario aggiornare alcuni valori del foglio di stile.