同種の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>
適用イメージ