Svelte中实现全选复选框遇异常，求解决方案

问题根源 #

• 加preventDefault时，浏览器会被阻止自动更新全选框的checked状态——你手动把所有子项设为选中，但全选框自身状态没同步，所以看起来没勾选。
• 不加preventDefault时，浏览器会先切换全选框状态，再执行你的点击逻辑，此时如果已有子项被勾选，逻辑判断会和实际状态错位，导致反向操作。

正确实现方式 #

核心逻辑是：让全选框状态完全由子项选中状态推导，点击全选框时直接修改所有子项的选中状态，不依赖浏览器默认的复选框状态切换。

示例代码：

<script>
  let items = [
    { id: 1, name: '选项1', checked: false },
    { id: 2, name: '选项2', checked: false },
    { id: 3, name: '选项3', checked: false }
  ];

  // 响应式计算全选状态：所有子项都选中时为true
  $: allChecked = items.every(item => item.checked);

  function toggleAll() {
    // 反转当前全选状态，批量更新子项
    const newState = !allChecked;
    items = items.map(item => ({ ...item, checked: newState }));
  }
</script>

<div>
  <!-- 全选框绑定计算属性，点击时直接触发批量更新 -->
  <input 
    type="checkbox" 
    id="toggle-all" 
    bind:checked={allChecked}
    on:click={toggleAll}
  />
  <label for="toggle-all">全选</label>

  {#each items as item (item.id)}
    <div>
      <input 
        type="checkbox" 
        id={`item-${item.id}`} 
        bind:checked={item.checked}
      />
      <label for={`item-${item.id}`}>{item.name}</label>
    </div>
  {/each}
</div>

代码说明 #

1. 响应式计算属性allChecked：用$:声明实时计算，只要子项的checked状态变化，就自动更新全选框的勾选状态，保证双向同步。
2. 全选框绑定checked：直接把全选框的勾选状态绑定到allChecked，手动勾选所有子项时，全选框会自动勾选，符合预期。
3. 点击全选逻辑：点击时直接基于当前全选状态的反值，批量更新所有子项的选中状态，完全绕开浏览器默认的复选框状态切换，避免了状态冲突。

这样实现后，不管是点击全选框还是手动勾选子项，所有状态都会保持一致，不会出现异常。

内容的提问来源于stack exchange，提问作者Harry Payne