bind:group для групп переключателей и флажков
Синхронизируйте группу связанных полей ввода с одной переменной
«bind:group для групп переключателей и флажков» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Группы переключателей
Для взаимоисключающих вариантов используйте несколько переключателей с одной и той же переменной 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" /> LКак это работает
Связанная переменная получает значение выбранного переключателя.
Начальное значение
Инициализируйте переменную значением варианта, выбранного по умолчанию.
let size = "md";Группы флажков
Для множественного выбора привяжите группу флажков к массиву.
<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> DocsПоведение массива
Связанный массив содержит значения всех установленных флажков. Добавление и удаление выполняются автоматически.
Инициализация массива
Начните с пустого массива или добавьте в него предварительно выбранные значения.
let tags = ["bug"];Сочетание с другими полями
В одной форме можно использовать привязки value и group для создания комбинированных интерфейсов.
Перебор вариантов
Используйте {#each}, чтобы создавать варианты из данных.
{#each sizes as size}
<label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}Отключённые варианты
Можно отключать отдельные варианты, не нарушая привязку группы.
Отправка формы
При отправке формы значения соответствуют связанной переменной.
Проверка
Сочетайте с реактивными проверками, чтобы требовать выбора хотя бы одного варианта.
$: hasSelection = tags.length > 0;Быстрая проверка
Какой тип имеет связанная переменная для группы флажков?
Итоги
Используйте bind:group с общей переменной для переключателей (строка) и флажков (массив значений).
Часто задаваемые вопросы
Урок «bind:group для групп переключателей и флажков» бесплатный?
Да — полный текст урока «bind:group для групп переключателей и флажков» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «bind:group для групп переключателей и флажков»?
Синхронизируйте группу связанных полей ввода с одной переменной Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «bind:group для групп переключателей и флажков»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- bind:value для текстовых полей ввода
- bind:checked для флажков
- bind:group для групп переключателей и флажков
- bind:this для ссылок на элементы DOM