チェックボックスグループとは？
Webフォームなどでよく見かけるチェックボックス。複数の選択肢から、好きなものをいくつでも選択できる便利な入力方式です。今回は、このチェックボックスをさらに便利に活用するための「チェックボックスグループ」について解説していきます。
チェックボックスとラジオボタンの違い
チェックボックスと似たような機能を持つスイッチにラジオボタンがありますが、ラジオボタンは複数の選択肢から **1 つだけ** を選ぶ場合 に使用され、チェックボックスは複数の選択肢からあてはまるものを **すべて** 選ぶ場合に使用されます。
| 機能 | ラジオボタン | チェックボックス |
|---|---|---|
| 選択可能数 | 1つのみ | 複数選択可能 |
| 用途例 | 性別選択、アンケートでの単一回答 | 興味のある分野、サービスへの複数申し込み |
チェックボックスグループとは
これらの特長を持つチェックボックスをグループとして操作できるものが、**チェックボックスグループ**です。チェックボックスグループは、関連する複数のチェックボックスをまとめて扱い、例えば以下のような操作を可能にします。
- グループ内のチェックボックスを一括で選択/解除する
- 選択されているチェックボックスの数を取得する
- 選択状態に応じて、他のフォーム要素の表示/非表示を切り替える
HTMLでの実装例
チェックボックスグループは、複数のチェックボックスを同じname属性で定義することで実現できます。下記は、「好きな果物」を選択するフォームの例です。
<form>
<label>好きな果物：</label>
<br>
<input type="checkbox" name="fruits" value="apple">りんご
<input type="checkbox" name="fruits" value="banana">バナナ
<input type="checkbox" name="fruits" value="orange">オレンジ
<br>
<button type="submit">送信</button>
</form>
上記のように、全てのチェックボックスのname属性を"fruits"とすることで、これらはチェックボックスグループとして扱われます。フォーム送信時には、選択された果物の値がサーバーに送信されます。
まとめ
チェックボックスグループは、関連する複数の選択肢をユーザーに選んでもらう際に便利な機能です。HTMLと組み合わせることで、柔軟で使いやすいフォームを作成することができます。
参考文献
関連QA
Q1: チェックボックスグループで選択可能な項目数を制限することはできますか？
A1: はい、JavaScriptなどを用いることで、チェックボックスグループで選択可能な項目数を制限することができます。チェックボックスが選択されるたびに、選択されている項目数をカウントし、制限数を超えた場合はそれ以上の選択を無効にする処理を実装します。
Q2: チェックボックスグループの選択状態をJavaScriptで取得するにはどうすればよいですか？
A2: `document.querySelectorAll('input[name="fruits"]:checked')` を使用することで、"fruits"という名前のチェックボックスグループの中で、チェックされている要素を取得できます。取得した要素のvalue属性から、選択された値を取得できます。
Q3: チェックボックスグループの選択状態を初期値として設定するにはどうすればよいですか？
A3: HTMLの`checked`属性を使用することで、チェックボックスの初期状態を選択状態に設定できます。例えば、"りんご"のチェックボックスを初期状態で選択状態にするには、以下のように記述します。
<input type="checkbox" name="fruits" value="apple" checked>りんごその他の参考記事:checkbox jquery 取得