HTMLでチェックボックスを既定でチェック状態にする方法
HTMLのフォームでチェックボックスをデフォルトでチェック状態にするには、<input>タグのchecked属性を使用します。この記事では、checked属性の使い方、適用例、注意点などを詳しく解説します。
checked属性の基本
checked属性は、<input type="checkbox">要素に対して使用されます。この属性は、ページが最初に読み込まれたときにチェックボックスがオンになっているかどうかを指定します。 checked属性は、属性値を持たないブール属性です。つまり、属性が存在するだけで効果があります。
コード例
<input type="checkbox" id="agree" name="agree" checked>
<label for="agree">利用規約に同意します</label>
上記のコードでは、checked属性が設定されているため、"利用規約に同意します"のチェックボックスはデフォルトでオンの状態になります。
適用例
checked属性は、様々な場面で活用できます。例えば、
| 例 | 説明 |
|---|---|
| ニュースレターの購読設定 | デフォルトで購読するにチェックを入れておく |
| アンケートの複数選択 | 特定の選択肢をあらかじめ選択しておく |
| ユーザー設定の保存 | 前回選択した設定を記憶しておき、次回アクセス時に反映する |
注意点
checked属性は、ページが最初に読み込まれた時の状態を指定するものであり、ユーザーがチェックボックスの状態を変更しても、その情報はサーバーに送信されません。ユーザーがチェックを入れたかどうかの情報は、サーバーに送信するために、フォームの送信時にname属性も設定する必要があります。- アクセシビリティの観点から、チェックボックスのラベルは、
<label>要素を使用して明確に関連付けるようにしましょう。for属性を使用して、<label>要素を対応するチェックボックスに関連付けます。
参考資料
よくある質問
Q1. checked属性を動的に設定するにはどうすればよいですか？
A1. JavaScriptを使用して、checkedプロパティを操作することで、動的にチェック状態を設定できます。
Q2. チェックボックスの初期状態をJavaScriptで変更するにはどうすればよいですか？
A2. ページの読み込み時に実行されるJavaScriptコード内で、チェックボックスのcheckedプロパティを変更します。
Q3. 複数のチェックボックスをデフォルトでチェック状態にするにはどうすればよいですか？
A3. 各チェックボックスの<input>タグに個別にchecked属性を設定します。
その他の参考記事:checkbox jquery 取得