在 Svelte 中实现受控 checkbox 时，若仅用 checked={value} 和 on:click，会导致 DOM 状态与组件状态脱节；正确做法是使用 bind:checked 实现双向绑定，并优先监听 change 事件以确保状态实时同步。
在 svelte 中实现受控 checkbox 时，若仅用 `checked={value}` 和 `on:click`，会导致 dom 状态与组件状态脱节；正确做法是使用 `bind:checked` 实现双向绑定，并优先监听 `change` 事件以确保状态实时同步。
Svelte 的 <input type="checkbox"> 元素天然支持双向绑定语法 bind:checked，它会自动同步 DOM 的选中状态与 JavaScript 变量值。而你原始代码中使用 checked={checked}（单向属性绑定）+ on:click（手动触发），存在两个关键问题：
-
状态不同步：
checked={checked}仅将变量值“推”给 DOM，但用户点击后 DOM 自身切换了checked状态，Svelte 并不会自动反向更新checked变量——导致组件状态滞后； -
事件时机不当：
click事件触发时，DOM 状态尚未完成切换（尤其在 checkbox 中），应改用change事件，它在用户交互完成、状态真正改变后才触发，更可靠。
✅ 正确写法如下（精简、标准、可复用）：
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let checked = false;
const dispatch = createEventDispatcher();
// 使用 bind:checked 实现双向同步
// change 事件确保获取最终状态
function handleChange() {
dispatch('change', { checked });
}
</script><input type="checkbox" bind:checked on:change="{handleChange}">
? 注意：
bind:checked是语法糖，等价于同时设置checked={checked}和on:change={(e) => checked = e.target.checked}。因此无需手动维护checked值，Svelte 会自动处理。
? 在父组件中使用时，同样需用 bind:checked 实现受控：
<!-- Parent.svelte -->
<script>
let isChecked = false;
</script><customcheckbox bind:checked="{isChecked}"></customcheckbox><!-- 或解构为 --><customcheckbox bind:checked></customcheckbox>
⚠️ 补充说明：
- 若需保留
click逻辑（如阻止默认行为或添加动画），仍应配合bind:checked使用，而非替代它； -
bind:checked仅适用于原生<input type="checkbox">，自定义渲染（如用 div 模拟 checkbox）需手动管理状态和aria-checked； - 样式中建议补充
:indeterminate状态支持，提升无障碍体验。
通过 bind:checked + on:change 的组合，即可彻底解决状态不一致问题，让父组件真正拥有对 checkbox 状态的完全控制权。
