bind:group pour les groupes de boutons radio et de cases à cocher
Synchronisez un groupe de saisies associées avec une seule variable.
bind:group pour les groupes de boutons radio et de cases à cocher est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Groupes de boutons radio
Pour des options mutuellement exclusives, utilisez plusieurs boutons radio avec la même variable bind:group.
<input type="radio" bind:group={size} value="sm" /> S
<input type="radio" bind:group={size} value="md" /> M
<input type="radio" bind:group={size} value="lg" /> LFonctionnement
La variable liée est égale à la valeur du bouton radio sélectionné.
Valeur initiale
Initialisez la variable avec la valeur de l’option sélectionnée par défaut.
let size = "md";Groupes de cases à cocher
Pour une sélection multiple, liez un groupe de cases à cocher à un tableau.
<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> DocsComportement du tableau
Le tableau lié contient les valeurs de toutes les cases actuellement cochées. Les ajouts et les suppressions sont automatiques.
Initialiser un tableau
Commencez avec un tableau vide ou avec des valeurs présélectionnées.
let tags = ["bug"];Combiner avec d’autres champs
Vous pouvez lier value et group dans le même formulaire pour créer des interfaces hybrides.
Parcourir les options
Utilisez {#each} pour générer des options à partir de données.
{#each sizes as size}
<label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}Options désactivées
Vous pouvez désactiver des options individuelles sans rompre la liaison du groupe.
Envoi du formulaire
Lors de l’envoi du formulaire, les valeurs correspondent à celles de la variable liée.
Validation
Combinez cette liaison avec des vérifications réactives pour exiger au moins une sélection.
$: hasSelection = tags.length > 0;Vérification rapide
Pour les groupes de cases à cocher, quel est le type de la variable liée ?
Récapitulatif
Utilisez bind:group avec une variable partagée pour les boutons radio (chaîne) et les cases à cocher (tableau de valeurs).
Questions Fréquemment Posées
La leçon « bind:group pour les groupes de boutons radio et de cases à cocher » est-elle gratuite ?
Oui — le texte complet de « bind:group pour les groupes de boutons radio et de 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:group pour les groupes de boutons radio et de cases à cocher » ?
Synchronisez un groupe de saisies associées avec une seule variable. 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 3 sur 4.
Combien de temps prend la leçon « bind:group pour les groupes de boutons radio et de 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