同種のFormをグループ化して変数にBindする

ラジオボタンやチェックボックスなど複数の選択項目をグループ化して値を取得する場合は"bind:group"にて変数にバインドできる。チェックボックスのように複数値を取得するものは、配列でバインドされる。

app.svelte

<script>
        import BindGroup from './BindGroup.svelte';
</script>

<main>
        <BindGroup />
</main>

<style>
</style>

BindGroup.svelte

<script>
        let radioType = ['男性', '女性', '秘密'];
        let checkSports = ['バレーボール', 'サッカー', 'バドミントン', '剣道'];
        let type = ''
        let sports = [];
</script>

{#each radioType as t}
<div>
        <input type=radio bind:group={type} value="{t}"> {t}
</div>
{/each}
<p>{type}</p>

{#each checkSports as s}
<div>
        <input type=checkbox bind:group={sports} value="{s}" /> {s}
</div>
{/each}
<p>{sports}</p>

<style>
</style>

---

適用イメージ