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