0Pricing
Sveltejs Academy · レッスン

チェックボックスのbind:checked

ブール変数をチェックボックス入力のchecked状態にバインドします。

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

チェックボックスのバインディング

bind:checked を使って、チェックボックスの入力と真偽値を同期します。

<input type="checkbox" bind:checked={agreed} />

状態の読み取り

チェックされているとき、バインドされた変数は true になり、チェックされていないときは false になります。

表示の切り替え

{#if} と組み合わせると、チェックボックスの状態に応じてコンテンツを表示または非表示にできます。

{#if agreed}<p>Thanks!</p>{/if}

プログラムから設定する

変数に代入すると、チェックボックスの表示状態が切り替わります。

function reset() { agreed = false; }

複数のチェックボックス

独立したチェックボックスには、チェックボックスごとに 1 つの変数を宣言します。

let sub = false, terms = false;

三状態入力

DOM には indeterminate プロパティもあります。bind:indeterminate でバインドできます。

<input type="checkbox" bind:indeterminate={partial} />

フォームとの統合

チェックボックスの状態は、ほかの入力と同じようにフォーム送信の対象になります。

label でのラップ

ラベルをクリックして切り替えられるように、チェックボックスを <label> の中に配置します。

<label><input type="checkbox" bind:checked={dark} /> Dark mode</label>

アクセシビリティ

チェックボックスには必ずラベルを付けてください。スクリーンリーダーは、内容を理解するために表示ラベルを必要とします。

無効状態

disabled={...} と組み合わせると、読み取り専用のチェックボックスにできます。

リアクティブな副作用

バインドされた変数が更新されたときに実行される $: ステートメントで、変更に反応します。

$: if (dark) document.body.classList.add("dark");

クイックチェック

bind:checked は何をバインドしますか。

まとめ

bind:checked は真偽値をチェックボックスに結び付けます。3 つ目の表示状態には bind:indeterminate を使用します。

よくある質問

「チェックボックスのbind:checked」レッスンは無料ですか？

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

「チェックボックスのbind:checked」で何を学びますか？

ブール変数をチェックボックス入力のchecked状態にバインドします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「チェックボックスのbind:checked」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

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