iCheck : Checkbox et Radio boutons avec Jquery

le 9 avril 2013 • Design • par SALADETHOMASOIGNONS

Personnalisez les checkbox et boutons radio de vos formulaires avec iCheck. Fonctionne avec jQuery, gratuit et installé en 3 minutes.

iCheck, c'est quoi ?

iCheck est un plugin Jquery créé par Damir Foy permettant de personnaliser les checkbox et autres radio buttons par défaut.

Celui-ci offre plusieurs skins, et plusieurs couleurs, adaptable sur fond clair ou sombre il y en a donc pour tous les goûts !

Au total 6 thèmes sont proposés comprenant tous les états des boutons correctement réalisés ! Le plugin est entièrement personnalisable en CSS si les thèmes proposées ne vous conviennent pas, ou que vous désirez un peu d'originalité.

Captures d'écran

Utilisation du plugin :

Pour son utilisation rien de plus simple, importez le skin de votre choix, ainsi que le fichier .js du plugin.

Insérez avant le : </head> les liens vers les fichiers précédemment importés comme cela :

<link href="votredossier/futurico/futurico.css" rel="stylesheet">
<script src="votredossier/jquery.icheck.js"></script>

Créez vos checkbox et radio :

<input type="checkbox">
<input type="checkbox" checked>
<input type="radio">
<input type="radio" checked>

Ajoutez le javascript à l'HTML :

<script>
$(document).ready(function(){
  $('input').iCheck({
    checkboxClass: 'icheckbox_futurico',
    radioClass: 'iradio_futurico',
    increaseArea: '20%' // optional
  });
});
</script>

et le tour est joué !

Compatibilité :

iCheck est compatible tout autant sur votre navigateur web desktop (IE7+, FF2+, Chrome, Safari, Opera...) que sur mobile (iOS, Android, BlackBerry, Windows Phone)

iCheck : Checkbox et Radio boutons avec Jquery

iCheck, c'est quoi ?

Captures d'écran

Utilisation du plugin :

Compatibilité :

Lisez aussi...

Javascript : permettre les tabulations dans une zone de texte

Javascript : réaliser un champ de texte avec auto-suggestions