JQuery et bouton radio
Par mrjay42, jeudi 22 octobre 2009 à 11:55 :: xhtml/css/javascript :: #48 :: rss
Faire interagir un bouton radio et JQuery afin de déclencher une action en fonction d'un click ! C'est tout bête une fois de plus, mais mieux vaut connaitre la syntaxe
Prenons 3 boutons radio :
<label for="repetition-1"> <input type="radio" name="repetition" id="repetition-1" value="1" /> Tous les mois</label> <label for="repetition-2"> <input type="radio" name="repetition" id="repetition-2" value="2" /> Tous les jours</label> <label for="repetition-3"> <input type="radio" name="repetition" id="repetition-3" value="3" />immédiatement</label>
Prenons 3 <div>
<div id="toto1"></div> <div id="toto2"></div> <div id="toto3"></div>
Nous voulons :
Quand l'utilisateur clique sur le bouton radio ayant pour id "repetition-1" que le champ div ayant pour id "toto1" s'affiche et que les autres soient cachés.
Idem pour les deux autres boutons radio et div
Voici le code JQuery "qui va bien"
<script type="text/javascript"> jQuery(window).ready(function(){ jQuery("#repetition-1").click(function(){ jQuery("#toto1").show("slow"); jQuery("#toto2").hide("slow"); jQuery("#toto3").hide("slow"); }); jQuery("#repetition-2").click(function(){ jQuery("#toto1").hide("slow"); jQuery("#toto2").show("slow"); jQuery("#toto3").hide("slow"); }); jQuery("#repetition-3").click(function(){ jQuery("#toto1").hide("slow"); jQuery("#toto2").hide("slow"); jQuery("#toto3").show("slow"); }); }); </script>
Au cas où, le code pour insérer JQuery qui est necessaire et suffisant pour faire fonctionner cet exemple est :
<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>