bind:checked pour les cases à cocher
Liez une variable booléenne à l’état coché d’une case à cocher.
bind:checked pour les cases à cocher est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Liaison d’une case à cocher
Utilisez bind:checked pour synchroniser une valeur booléenne avec une case à cocher.
<input type="checkbox" bind:checked={agreed} />Lire l’état
La variable liée vaut true lorsque la case est cochée, et false dans le cas contraire.
Afficher ou masquer
Combinez cette liaison avec {#if} pour afficher ou masquer du contenu selon l’état de la case.
{#if agreed}<p>Thanks!</p>{/if}Définition programmatique
L’affectation d’une valeur à la variable modifie l’affichage de la case à cocher.
function reset() { agreed = false; }Plusieurs cases à cocher
Pour des cases indépendantes, déclarez une variable par case.
let sub = false, terms = false;Champs à trois états
Le DOM possède également une propriété indeterminate ; vous pouvez la lier avec bind:indeterminate.
<input type="checkbox" bind:indeterminate={partial} />Intégration aux formulaires
L’état d’une case à cocher participe à l’envoi du formulaire comme celui de tout autre champ.
Envelopper avec un libellé
Placez la case à cocher dans un élément <label> afin qu’un clic sur le libellé la fasse changer d’état.
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>Accessibilité
Associez toujours un libellé aux cases à cocher. Les lecteurs d’écran dépendent de libellés visibles pour fournir le contexte.
État désactivé
Combinez avec disabled={...} pour créer des cases à cocher en lecture seule.
Effets secondaires réactifs
Réagissez aux changements avec une instruction $: qui s’exécute lorsque la variable liée est mise à jour.
$: if (dark) document.body.classList.add("dark");Vérification rapide
À quoi bind:checked lie-t-il une valeur ?
Récapitulatif
bind:checked lie une valeur booléenne à une case à cocher. Utilisez bind:indeterminate pour le troisième état visuel.
Questions Fréquemment Posées
La leçon « bind:checked pour les cases à cocher » est-elle gratuite ?
Oui — le texte complet de « bind:checked pour les cases à cocher » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « bind:checked pour les cases à cocher » ?
Liez une variable booléenne à l’état coché d’une case à cocher. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « bind:checked pour les cases à cocher » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- bind:value pour les saisies de texte
- bind:checked pour les cases à cocher
- bind:group pour les groupes de boutons radio et de cases à cocher
- bind:this pour les références aux éléments du DOM