Médiaforma

All posts tagged cases à cocher

Exercice sur les cases à cocher

Pour savoir si une case est cochée, vous utiliserez la méthode is(‘:checked’).

Saisissez le code suivant dans NotePad++ et sauvegardez-le sous le nom cases-radio-listes2.htm.

<!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>
    <textarea id="status" style="width:400px; height: 300px;"></textarea>
    <script>
      $(function() {
        // Insérer le code jQuery ici
      });
    </script>
  </body>
</html>

 

Définissez un gestionnaire d’événements qui détecte les modifications sur les cases à cocher et qui les affiche dans l’élément textarea.

 

Solution

$('input[type="checkbox"]').on('change',function(){
  if ($(this).is(':checked'))
    $('#status').append($(this).attr('id') + ' cochée\n');
  else
    $('#status').append($(this).attr('id') + ' décochée\n');
});

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');
  });
});

 


Une nouvelle technique permet de sélectionner plus facilement des éléments dans l’Explorateur de fichiers. Basculez sur l’onglet Affichage dans le Ruban et cochez la case Cases à cocher des éléments dans le groupe Afficher/Masquer. De petites cases à cocher apparaissent à gauche de chaque élément (dossier ou fichier) affiché dans l’Explorateur. Pour effectuer des sélections multiples, il vous suffit maintenant de cocher les cases correspondantes.

Bien entendu, les techniques conventionnelles sont toujours utilisables. Vous pouvez par exemple :

  • Si les éléments à sélectionner sont contigus : cliquez sur le premier élément, maintenez la touche Maj enfoncée et cliquez sur le dernier élément.
  • Si les éléments à sélectionner sont disjoints : maintenez la touche Ctrl enfoncée et cliquez tour à tour sur les éléments à sélectionner.
  • Pour sélectionner tous les éléments du dossier courant, utilisez le raccourci Ctrl+A.