在 Svelte 中实现受控复选框时，必须使用 bind:checked 双向绑定而非 on:click 手动处理，否则 DOM 状态与组件状态将脱节，导致点击行为不可预测。
在 svelte 中实现受控复选框时，必须使用 `bind:checked` 双向绑定而非 `on:click` 手动处理，否则 dom 状态与组件状态将脱节，导致点击行为不可预测。
Svelte 的 <input type="checkbox"> 元素与其他表单控件不同：它的交互逻辑天然依赖于 checked 属性与 DOM 状态的实时同步。你当前的实现中，仅通过 checked={checked} 进行单向属性传递，并在 on:click 中手动派发事件，但并未更新 checked 变量本身——这导致每次点击后，DOM 被浏览器自动切换状态，而组件内部的 checked 值仍保持原值，下一次渲染时又被强制覆盖回旧值，造成“视觉闪烁”或“状态不一致”。
✅ 正确做法是使用 bind:checked：
<script lang="ts"> export let checked = false; </script> <input type="checkbox" bind:checked />
bind:checked 是 Svelte 提供的语法糖，等价于：
- 将
checked值同步到 DOM 的checked属性（render 时）； - 同时监听
change事件（非click），并在事件触发时自动更新checked变量。
⚠️ 注意事项：
-
不要用
on:click处理 checkbox 状态：click事件在change之前触发，此时 DOM 状态尚未稳定，读取!checked并派发事件会导致竞态；应优先使用on:change（Svelte 默认bind:checked即基于此）。 -
父组件需同样使用
bind:checked实现受控：若父组件传入checked={value}但未绑定更新逻辑，则子组件仍是只读的。例如：
<!-- Parent.svelte -->
<script>
let isChecked = false;
</script>
<CustomCheckbox bind:checked={isChecked} />- 若需额外逻辑（如验证、日志、副作用），可在
bind:checked基础上添加on:change监听器，但切勿覆盖默认绑定行为：
<script lang="ts">
export let checked = false;
function handleChange() {
console.log('Checkbox changed to:', checked);
// 可在此触发自定义事件，但状态已由 bind:checked 保证同步
}
</script>
<input
type="checkbox"
bind:checked
on:change={handleChange}
/>? 总结：Svelte 表单控件的最佳实践是「信任绑定」——用 bind: 让框架负责状态同步，聚焦业务逻辑而非 DOM 操作。对 checkbox 来说，bind:checked 是唯一可靠、简洁且符合语义的受控方案。
