0Pricing
Sveltejs Academy · 课时

使用 bind:group 绑定单选和复选框组

将一组相关输入同步到单个变量。

使用 bind:group 绑定单选和复选框组 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 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 绑定单选和复选框组」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。

「使用 bind:group 绑定单选和复选框组」这节课中我会学到什么？

将一组相关输入同步到单个变量。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Sveltejs Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「使用 bind:group 绑定单选和复选框组」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Sveltejs Academy 课中编写并运行代码吗？

能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 bind:value 绑定文本输入
  2. 使用 bind:checked 绑定复选框
  3. 使用 bind:group 绑定单选和复选框组
  4. 使用 bind:this 获取 DOM 元素引用
← 返回 Sveltejs Academy