【初心者向け】HTMLのchecked属性とは？基本から応用まで徹底解説！
山崎講師こんにちは。ゆうせいです。
今回は、HTMLのフォームでよく使われる「checked属性」について解説します。
「フォームで最初からチェックが入っているアレってどうやって設定するの？」と疑問に思ったことはありませんか？
それ、checked属性の仕業なんです。
この属性は地味ですが、ユーザー体験を大きく左右する大切な要素。
いっしょに基礎から応用までしっかり理解していきましょう！
checked属性とは？
定義と役割
checked属性は、主に以下の2つのHTML要素に使われます。
| 対象要素 | 説明 |
|---|---|
<input type="checkbox"> | チェックボックス |
<input type="radio"> | ラジオボタン |
この属性を付けることで、「ページ読み込み時点で選択済み」にできます。
例：チェックボックスに使う場合
<input type="checkbox" name="news" checked> メールニュースを受け取る
→ ページを開いたとき、チェックが入った状態になります。
例：ラジオボタンに使う場合
<input type="radio" name="gender" value="male" checked> 男性
<input type="radio" name="gender" value="female"> 女性
→ 「男性」が初期選択されます。
checked属性の動作の仕組み
ブール属性とは？
checkedは「ブール属性」の一種です。
【ブール属性とは？】
trueかfalseの2値しか持たない属性- HTMLでは、記述するだけで「true（オン）」になる
- 書かなければ「false（オフ）」
つまり、
<input type="checkbox" checked>
このように checked と書くだけで OK。checked="checked" と書いても同じ意味になります。
【ポイント】
<input type="checkbox" checked="false">
こう書いてもfalseにはなりません！
これはHTMLの仕様上、checkedが書いてある時点でtrue扱いになるからです。
JavaScriptとの連携
状態を取得する
フォームの状態を動的に取得したいとき、JavaScriptで次のように書きます。
document.querySelector('input[name="news"]').checked
このコードは「メールニュースのチェックボックスがチェックされているか」をtrueまたはfalseで返します。
チェック状態を変更する
チェックを動的にオン／オフにしたいときはこうします。
// チェックを入れる
document.querySelector('input[name="news"]').checked = true;
// チェックを外す
document.querySelector('input[name="news"]').checked = false;
チェックを操作することで、インタラクティブなフォームが作れますね！
よくある落とし穴と注意点
name属性が同じラジオボタンで複数checked
<input type="radio" name="color" value="red" checked>
<input type="radio" name="color" value="blue" checked>
→ どちらか1つしか選ばれません。
ラジオボタンは、同じnameグループ内で1つしか選べない仕組みなので、複数のchecked指定は無効になるんです。
初期状態と送信値の違い
checkedは初期状態を決めるだけです。
ユーザーがチェックを外せば、その変更は送信内容に反映されます。
checked属性のメリットとデメリット
| メリット | デメリット |
|---|---|
| 初期状態を制御できる | 意図せず選択済みにしてしまうと誤送信の原因になる |
| ユーザーの操作回数を減らせる | フォームの意図が伝わりにくいことがある |
例えば「利用規約に同意します」にチェックを初期状態で入れてしまうと、「勝手に同意したことになる」などトラブルのもとになります。
実践例：お申込みフォームに使う
<form>
<p>メルマガを購読しますか？</p>
<label><input type="checkbox" name="mailmagazine" checked> はい</label><br>
<p>ご希望の連絡方法</p>
<label><input type="radio" name="contact" value="email" checked> メール</label>
<label><input type="radio" name="contact" value="phone"> 電話</label>
<br><br>
<button type="submit">送信</button>
</form>
このように使うと、ユーザーにとっても親切なフォームになります。
よくある質問（FAQ）
Q1. checked属性はselect要素にも使えますか？
いいえ、<select>タグではselected属性を使います。
<select>
<option value="tokyo" selected>東京</option>
</select>
checkedはあくまでcheckboxとradio専用です。
Q2. CSSでchecked状態をスタイリングできますか？
もちろん可能です！
input[type="checkbox"]:checked {
outline: 2px solid blue;
}
擬似クラス:checkedを使えば、チェックされた要素にスタイルを適用できます。
まとめと今後の学習のヒント
checked属性は、HTMLフォームの中で非常に重要な属性のひとつ。
ブール属性の仕組みや、JavaScriptとの連携方法、ラジオボタンの仕様などを理解しておくと、実務でとても役立ちます。
さらに学習を深めたい方は、次のテーマもぜひ挑戦してみてください。
selectedやdisabledなど他のブール属性- フォームのバリデーション（
required,patternなど） :checkedを使ったCSSアニメーション- JavaScriptでのフォーム操作とバリデーション連携
小さな属性にも意味があります。
こうした基本を丁寧に押さえておくことで、どんな開発にも応用が利くようになりますよ！
他にも気になるHTML属性があれば、ぜひ教えてください！また解説します！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
