Temizzare Checkbox con JQuery

Grafica
di in Grafica il 4 Settembre 2009

 

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”/>


Inoltre dovremo inserire nel nostro foglio di stile le proprietà necessarie per rappresentare il nostro tag come preferiamo. Ad esempio:

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

checkbox

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.

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

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *