Utilisation checkbox personnalisée jquery

Toutes vos questions sur jQuery, CSS, HTML5, mise en page...
ludof
 
Messages: 1
Inscription: 06 Oct 2013, 14:01

Utilisation checkbox personnalisée jquery

Messagede ludof » 06 Oct 2013, 14:31

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 ! :D


Merci beaucoup !

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2180
Inscription: 06 Sep 2008, 22:05

Re: Utilisation checkbox personnalisée jquery

Messagede Galdon » 08 Oct 2013, 20:43

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/
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol


Retourner vers HTML / CSS / Javascript

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité