使用 bind:checked 绑定复选框
将布尔变量绑定到复选框输入的 checked 状态。
使用 bind:checked 绑定复选框 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
复选框绑定
使用 bind:checked 将布尔值与复选框输入同步。
<input type="checkbox" bind:checked={agreed} />读取状态
选中时，绑定的变量为 true；未选中时为 false。
切换可见性
与 {#if} 结合，根据复选框状态显示或隐藏内容。
{#if agreed}<p>Thanks!</p>{/if}以编程方式设置
为变量赋值即可切换复选框的显示状态。
function reset() { agreed = false; }多个复选框
对于相互独立的复选框，请为每个复选框声明一个变量。
let sub = false, terms = false;三态输入
DOM 还提供 indeterminate 属性；您也可以使用 bind:indeterminate 对其进行绑定。
<input type="checkbox" bind:indeterminate={partial} />表单集成
复选框状态会像其他输入一样参与表单提交。
包裹标签
将复选框包裹在 <label> 中，这样点击标签即可切换复选框。
<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>无障碍性
请始终为复选框添加标签。屏幕阅读器依靠可见标签来了解上下文。
禁用状态
结合使用 disabled={...}，即可创建只读复选框。
响应式副作用
使用 $: 语句响应更改；绑定的变量更新时，该语句会运行。
$: if (dark) document.body.classList.add("dark");快速检查
bind:checked 绑定的是什么？
回顾
bind:checked 将布尔值与复选框关联。对于第三种视觉状态，请使用 bind:indeterminate。
常见问题解答
「使用 bind:checked 绑定复选框」课时是免费的吗？
是的 — 「使用 bind:checked 绑定复选框」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「使用 bind:checked 绑定复选框」这节课中我会学到什么？
将布尔变量绑定到复选框输入的 checked 状态。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「使用 bind:checked 绑定复选框」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 使用 bind:value 绑定文本输入
- 使用 bind:checked 绑定复选框
- 使用 bind:group 绑定单选和复选框组
- 使用 bind:this 获取 DOM 元素引用