Svelte动态显示隐藏复选框时group绑定选中值丢失问题

这个问题是Svelte bind:group 复选框绑定的默认逻辑导致的：

• bind:group 统计同组复选框的选中值时，只会纳入当前真实渲染在DOM中的复选框，当搜索过滤触发列表更新后，不匹配搜索条件的a、b对应的复选框会被直接从DOM树卸载，不再被bind:group 识别。
• 当你在过滤后的列表中勾选c时，Svelte同步chosenValues的值时，只会读取当前存在的已勾选复选框的取值，已经卸载的a、b的选中状态不会被纳入计算，因此原有选中值会被覆盖丢失。

不需要靠隐藏不匹配选项的DOM来兼容，直接放弃自动绑定bind:group，手动维护选中数组的状态即可，逻辑完全不受渲染列表变化的影响：

<script>
    let searchInput = '';
    let values = ['a', 'b', 'c', 'd', 'e', 'f'];
    $: filteredValues = searchInput ? values.filter(v => v.toLowerCase().includes(searchInput.toLowerCase())) : values;
    
    let chosenValues = [];
</script>

<input type="search" placeholder="Search" bind:value={searchInput} />

{#each filteredValues as value (value)}
    <div class="checkbox">
        <input 
            type="checkbox" 
            checked={chosenValues.includes(value)}
            on:change={(e) => {
                if (e.target.checked) {
                    chosenValues = [...chosenValues, value]
                } else {
                    chosenValues = chosenValues.filter(item => item !== value)
                }
            }}
            value={value} 
        />
        {value}
  </div>
{/each}

{chosenValues}

该方案下无论搜索过滤逻辑如何调整，已经选中的取值都会保留在chosenValues中，不会因为对应的DOM被卸载就丢失。

内容的提问来源于stack exchange，提问作者Kevin Renskers