Utilisation checkbox personnalisée jquery

[ludof]

Bonjour à toutes et à tous,

J'ai une question sans doutes bêtes mais je débute dans le HTML, CSS et Jquery...

Alors voilà, je suis en train de me faire un portfolio. J'aimerais que certaines parties ne soit visible ou non en fonction d'une checkbox en slider.
Je pense utilisé le jquery par la suite et me servir de la fonction pour cacher ou non des id

J'ai trouvé une checkbox comme je souhaité sur le site suivant :
http://www.cssflow.com/snippets/simple-toggle-switch/demo

Cependant je n'arrive pas à comprendre comment l'utiliser dans mon code en jquery.
Pour l'instant j'essaie juste de faire une alert en fonction de la checkbox mais rien ne se passe. Pourtant mon jquery est bien lié à la page...

Donc si quelqu'un saurait me guider, ce serait génial !


Merci beaucoup !

[Galdon]

J'ai regardé le code d'exemple, au début je ne comprenais pas comment fonctionne l'animation.

En fait elle n'est pas crée en javascript, elle est faite entièrement en CSS3 à l'aide des transitions.
En regardant le code HTML d'un switch, on voit qu'il y a une case à cocher (input type checkbox) qui est masquée en CSS, mais bien présente dans le code :

Code: Tout sélectionner

<label class="switch">
   <input type="checkbox" class="switch-input">
   <span class="switch-label" data-on="On" data-off="Off"></span>
   <span class="switch-handle"></span>
</label>

Cette checkbox sert à mémoriser la valeur du du switch (coché ou pas). Donc il suffit de l'attraper avec un sélecteur jQuery, voilà un petit exemple :

Code: Tout sélectionner

jQuery(document).ready(function($){
   $('.switch :checkbox').change(function(e){
      var message = $(this).prop('checked') ? 'on' : 'off';
      console.log(message);
   });
});

Et l'exemple en live : http://finalclap.free.fr/TEMP/FORUMS/fi ... kbox-demo/