bind:checked para caixas de seleção
Associe uma variável booleana ao estado de seleção de uma entrada de caixa de seleção.
bind:checked para caixas de seleção é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Vinculação de caixas de seleção
Use bind:checked para sincronizar um booleano com uma caixa de seleção.
<input type="checkbox" bind:checked={agreed} />Ler o estado
A variável vinculada é true quando está marcada e false quando não está.
Alternar a visibilidade
Combine com {#if} para mostrar ou ocultar conteúdo com base na caixa de seleção.
{#if agreed}<p>Thanks!</p>{/if}Definir programaticamente
Atribuir um valor à variável alterna a exibição da caixa de seleção.
function reset() { agreed = false; }Várias caixas de seleção
Para caixas de seleção independentes, declare uma variável para cada caixa.
let sub = false, terms = false;Campos de entrada de três estados
O DOM também tem uma propriedade indeterminate; você pode vinculá-la com bind:indeterminate.
<input type="checkbox" bind:indeterminate={partial} />Integração com formulários
O estado da caixa de seleção participa do envio de formulários como qualquer campo de entrada.
Envolver com um rótulo
Envolva a caixa de seleção em um <label> para que clicar no rótulo a alterne.
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>Acessibilidade
Sempre associe um rótulo às caixas de seleção. Leitores de tela dependem de rótulos visíveis para obter contexto.
Estado desativado
Combine com disabled={...} para criar caixas de seleção somente leitura.
Efeitos colaterais reativos
Reaja às alterações com uma instrução $: que é executada quando a variável vinculada é atualizada.
$: if (dark) document.body.classList.add("dark");Verificação rápida
O que bind:checked vincula?
Recapitulação
bind:checked associa um booleano a uma caixa de seleção. Use bind:indeterminate para o terceiro estado visual.
Perguntas Frequentes
A aula “bind:checked para caixas de seleção” é grátis?
Sim — o texto completo de “bind:checked para caixas de seleção” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “bind:checked para caixas de seleção”?
Associe uma variável booleana ao estado de seleção de uma entrada de caixa de seleção. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “bind:checked para caixas de seleção”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- bind:value para entradas de texto
- bind:checked para caixas de seleção
- bind:group para grupos de opções e caixas de seleção
- bind:this para referências a elementos do DOM