在 Svelte 中实现受控 Checkbox 时，若仅用 checked={value} 而未绑定双向数据流，HTML 原生 checkbox 的点击会绕过组件逻辑直接修改 DOM 状态，导致 JS 状态与 UI 不一致；正确做法是使用 bind:checked 实现双向同步，并优先监听 change 事件。
在 svelte 中实现受控 checkbox 时，若仅用 `checked={value}` 而未绑定双向数据流，html 原生 checkbox 的点击会绕过组件逻辑直接修改 dom 状态，导致 js 状态与 ui 不一致；正确做法是使用 `bind:checked` 实现双向同步，并优先监听 `change` 事件。
Svelte 的 <input type="checkbox"> 元素支持原生双向绑定语法 bind:checked，它能自动同步 DOM 状态与组件变量，避免手动处理事件引发的状态滞后问题。你当前代码中使用 checked={checked} 是单向属性传递（仅从 JS 到 DOM），而用户点击 checkbox 时，浏览器会直接翻转 DOM 的 checked 属性，但 checked 变量本身并未更新——因此下一次渲染仍按旧值执行，造成“UI 已选中，但 JS 状态未变”的错觉。
此外，click 事件在 checkbox 上存在时序陷阱：它在 DOM 状态变更前触发，此时 !checked 取到的是旧值；而 change 事件在用户交互完成、DOM 状态已稳定后触发，更符合状态同步语义。
✅ 正确实现如下（精简可靠版）：
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let checked = false;
const dispatch = createEventDispatcher();
// 使用 bind:checked 实现双向同步，无需手动 handleClick
// change 事件可选：仅当需额外逻辑（如日志、验证）时添加
function handleChange() {
dispatch('change', { checked });
}
</script>
<input
type="checkbox"
bind:checked
on:change={handleChange}
/>? 关键点说明：
bind:checked（等价于bind:checked={checked}）自动建立 JS 变量 ↔ DOM 属性的双向绑定；- 父组件使用该组件时，也必须用
bind:checked才能保持受控：<CustomCheckbox bind:checked={userAgreed} />- 若省略
bind:checked而改用on:change+ 手动赋值，易引入竞态或冗余逻辑，不推荐；- CSS 样式中
:is(:checked)可简化为:checked，且建议补充appearance: none以便完全自定义外观。
? 总结：Svelte 中表单控件的“受控”本质是状态所有权统一交由 JS 变量管理，bind: 是达成此目标的标准机制；避免混合使用属性设置（checked={...}）与手动事件干预，否则将破坏响应式闭环。
