PricingLoginStart free
Sveltejs Academy · レッスン

ラジオボタンとチェックボックスのグループに対するbind:group

関連する入力のグループを1つの変数に同期します。

レッスン 3/413 ステップ

「ラジオボタンとチェックボックスのグループに対するbind:group」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

ラジオグループ

相互に排他的な選択肢には、同じ bind:group 変数を使った複数のラジオボタンを使用します。

<input type="radio" bind:group={size} value="sm" /> S
<input type="radio" bind:group={size} value="md" /> M
<input type="radio" bind:group={size} value="lg" /> L

仕組み

バインドされた変数は、選択されたラジオボタンの値になります。

初期値

変数を、デフォルトで選択される option の値で初期化します。

let size = "md";

チェックボックスグループ

複数選択には、チェックボックスのグループを配列にバインドします。

<input type="checkbox" bind:group={tags} value="bug" /> Bug
<input type="checkbox" bind:group={tags} value="docs" /> Docs

配列の動作

バインドされた配列には、現在チェックされているすべてのボックスの値が入ります。追加と削除は自動的に行われます。

配列の初期化

空の配列、またはあらかじめ選択された値を含む配列から始めます。

let tags = ["bug"];

ほかの入力との組み合わせ

同じフォーム内で value と group をバインドし、複合的な UI を作成できます。

option の反復

{#each} を使って、データから option を描画します。

{#each sizes as size}
  <label><input type="radio" bind:group={chosen} value={size} /> {size}</label>
{/each}

無効な option

グループのバインディングを壊さずに、個々の option を無効にできます。

フォーム送信

フォームを送信すると、値にはバインドされた変数の内容が反映されます。

バリデーション

リアクティブなチェックと組み合わせて、少なくとも 1 つの選択を必須にできます。

$: hasSelection = tags.length > 0;

クイックチェック

チェックボックスグループで、バインドされる変数の型は何ですか。

対話的なレッスンで答える

まとめ

ラジオボタンには共有変数（文字列）とともに bind:group を使用し、チェックボックスには値の配列を使用します。

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース
41
レッスン
163
無料で学習を始めるコース全体を表示

よくある質問

「ラジオボタンとチェックボックスのグループに対するbind:group」レッスンは無料ですか？

はい。「ラジオボタンとチェックボックスのグループに対するbind:group」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「ラジオボタンとチェックボックスのグループに対するbind:group」で何を学びますか？

関連する入力のグループを1つの変数に同期します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「ラジオボタンとチェックボックスのグループに対するbind:group」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. テキスト入力のbind:value
  2. チェックボックスのbind:checked
  3. ラジオボタンとチェックボックスのグループに対するbind:group
  4. DOM要素参照のbind:this
← Sveltejs Academyに戻る