Médiaforma

jQuery – Cases à cocher, boutons radio et listes déroulantes

Print Friendly

Pour cocher/décocher une case à cocher, agissez sur son attribut checked : true=coché, false=décoché.

Pour sélectionner un bouton radio, agissez sur sa valeur avec la méthode val().

Enfin, pour sélectionner une valeur dans une liste déroulante, agissez sur sa valeur en appliquant la méthode val() à l’élément select correspondant.

 

Exercice sur la modification de cases à cocher, boutons radio et listes déroulantes

Tapez le code suivant dans NotePad++ et sauvegardez-le sous le nom cases-radio-listes.htm. Ajoutez les instructions jQuery nécessaires pour donner vie aux trois boutons.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Formulaire-Cases à cocher, boutons radio et listes déroulantes</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Cases à cocher, boutons radio et listes déroulantes</h2>
    Vos compétences :
    <input type="checkbox" id="html5" value="1"> HTML5
    <input type="checkbox" id="css3" value="2"> CSS3
    <input type="checkbox" id="jQuery" value="3"> jQuery<br>
    Compétence : Oui <input type="radio" name="competence" id="oui" value="o"> Non <input type="radio" name="competence" id="non" value="n"><br>
    Niveau<select id="niveau">
      <option value="debutant">Débutant</option>
      <option value="moyen">Moyen</option>
      <option value="confirme">Confirmé</option>
    </select><br><br>
    <button id="cocher-html5">Cocher la case HTML5</button>
    <button id="selectionner-oui">Sélectionner le bouton Oui</button>
    <button id="choisir-confirme">Choisir Confirmé dans la liste</button><br>

    <script>
      $(function() {
        // Insérez le code jQuery ici
      });
    </script>
  </body>
</html>

Solution

$(function() {
  $('#cocher-html5').on('click',function(){
    $('#html5').attr('checked', true);
  });
  $('#selectionner-oui').on('click',function(){
    $('#oui').val(['o']);
  });
  $('#choisir-confirme').on('click',function(){
    $('#niveau').val('confirme');
  });
});

 

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply