bind:group para grupos de botones de opción y casillas
Sincronice un grupo de entradas relacionadas con una sola variable
bind:group para grupos de botones de opción y casillas es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Grupos de botones de opción
Para opciones mutuamente excluyentes, use varios botones de opción con la misma 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" /> LCómo funciona
La variable asociada equivale al valor del botón de opción seleccionado.
Valor inicial
Inicialice la variable con el valor de la opción seleccionada de forma predeterminada.
let size = "md";Grupos de casillas
Para selecciones múltiples, asocie un grupo de casillas a un array.
<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> DocsComportamiento del array
El array asociado contiene los valores de todas las casillas marcadas en ese momento. Las adiciones y eliminaciones se realizan automáticamente.
Inicializar el array
Comience con un array vacío o con valores preseleccionados.
let tags = ["bug"];Combinar con otros campos
Puede asociar value y group en el mismo formulario para crear interfaces híbridas.
Iterar sobre las opciones
Use {#each} para representar opciones a partir de datos.
{#each sizes as size}
<label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}Opciones deshabilitadas
Puede deshabilitar opciones individuales sin romper la asociación del grupo.
Envío del formulario
Cuando se envía el formulario, los valores reflejan la variable asociada.
Validación
Combine con comprobaciones reactivas para exigir al menos una selección.
$: hasSelection = tags.length > 0;Comprobación rápida
En los grupos de casillas, ¿de qué tipo es la variable asociada?
Resumen
Use bind:group con una variable compartida para botones de opción (string) y casillas (array de valores).
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «bind:group para grupos de botones de opción y casillas» es gratis?
Sí — el texto completo de «bind:group para grupos de botones de opción y casillas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «bind:group para grupos de botones de opción y casillas»?
Sincronice un grupo de entradas relacionadas con una sola variable Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «bind:group para grupos de botones de opción y casillas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- bind:value para entradas de texto
- bind:checked para casillas de verificación
- bind:group para grupos de botones de opción y casillas
- bind:this para referencias a elementos del DOM