Médiaforma

jQuery – Exercice sur les cases à cocher

Print Friendly, PDF & Email

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');
});
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.