チェックボックスとは？
チェックボックス（英: check box、tick box）は、コンピュータのグラフィカルユーザインタフェース (GUI) の構成要素（ウィジェット）の一種で、いくつかあるオプションから複数の項目を選択するのに使われます。通常、四角の中に空白（偽の場合）かチェックマーク（真の場合）が表示される形式です。
チェックボックスの用途
チェックボックスは、様々な場面でユーザーに選択を促すために広く利用されています。例えば、以下のような場面で使用されます。
- ウェブサイトのフォームで、複数の興味のある項目を選択する場合
- アプリケーションの設定画面で、特定の機能を有効/無効にする場合
- アンケート調査で、複数の回答を選択できるようにする場合
チェックボックスの動作
チェックボックスは、クリックまたはタップすることで、オンとオフを切り替えることができます。
| 状態 | 説明 | 外観 |
|---|---|---|
| チェック済み（オン） | 項目が選択されている状態 | ✅ |
| チェックなし（オフ） | 項目が選択されていない状態 | ⬜ |
HTMLでのチェックボックスの実装
HTMLでは、<input type="checkbox"> 要素を使用してチェックボックスを作成します。
<input type="checkbox" id="option1" name="options" value="1">
<label for="option1">オプション1</label>
上記のコードは、「オプション1」というラベルのついたチェックボックスを作成します。
id属性は、チェックボックスを一意に識別するためのIDを指定します。name属性は、フォーム送信時にサーバーに送信されるデータの名前を指定します。同じname属性を持つ複数のチェックボックスがある場合、選択された項目の値が配列として送信されます。value属性は、チェックボックスが選択されたときに送信される値を指定します。<label>要素は、チェックボックスにラベルを付けるために使用します。for属性を対応するチェックボックスのid属性と同じ値にすることで、ラベルをクリックしてもチェックボックスを操作できるようになります。
参考資料
よくある質問
Q1. チェックボックスはいくつまで選択できますか？
A1. 制限はありません。複数のチェックボックスを選択することができます。
Q2. チェックボックスの初期状態を設定することはできますか？
A2. はい、checked 属性を指定することで、チェックボックスを初期状態でチェック済みにすることができます。
<input type="checkbox" id="option2" name="options" value="2" checked>
<label for="option2">オプション2</label>
Q3. JavaScriptでチェックボックスの状態を取得/設定するにはどうすればよいですか？
A3. checked プロパティを使用して、チェックボックスの状態を取得または設定することができます。
// チェックボックスの要素を取得
const checkbox = document.getElementById('option1');
// チェック状態を取得
const isChecked = checkbox.checked;
// チェック状態を設定
checkbox.checked = true; // チェックを入れる
checkbox.checked = false; // チェックを外す
その他の参考記事:jquery checked