0
0,00 0 prodotti

Nessun prodotto nel carrello.

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 […]

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;
}

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

.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.

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.

<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.

Lascia un commento

4 Settembre 2009

Alcuni link presenti in questo sito sono affiliati Amazon: guadagniamo una commissione se effettui un acquisto, senza costi aggiuntivi per te.
My Agile Privacy
Privacy and Consent by My Agile Privacy

Questo sito utilizza cookie tecnici e di profilazione. 

Puoi accettare, rifiutare o personalizzare i cookie premendo i pulsanti desiderati. 

Chiudendo questa informativa continuerai senza accettare. 

crossmenu