この記事で分かること
checkedの基本的な役割selectedの基本的な役割- チェック状態・選択状態の取得方法
- JavaScript で状態を変更する方法
checked と selected は、フォーム内のチェックボックス・ラジオボタン・セレクトメニューの状態を参照／設定するためのプロパティです。
ユーザーの入力状態を確認したり、JavaScript で選択状態を変更したりする際に必須の知識です。
checked とは？（基礎）
checked は、チェックボックスやラジオボタンが選択されているかどうかを判定するプロパティです。
true→ 選択されている（オン）false→ 選択されていない（オフ）
選択状態を変更することもできます。
// フォーム dataForm の1番目のエレメントをオンにする
document.dataForm.elements[0].checked = true;
selected とは？（基礎）
selected は、セレクトメニュー（<select>）内の各項目（<option>）が選択されているかどうかを判定するプロパティです。
true→ 選択されているfalse→ 選択されていない
項目は options[番号] で参照します。番号は 0 から始まります。
// セレクトメニュー dataMenu の1番目の項目が選択されている場合
if (document.dataForm.dataMenu.options[0].selected) {
alert("確認してください");
}
実際のフォーム例
<form name="dataForm">
<p>
<input type="checkbox" name="agree"> 同意する
</p>
<p>
<select name="dataMenu">
<option>選択肢1</option>
<option>選択肢2</option>
</select>
</p>
<input type="button" value="チェック状態確認"
onclick="alert(document.dataForm.agree.checked)">
<input type="button" value="選択状態確認"
onclick="alert(document.dataForm.dataMenu.options[0].selected)">
</form>
→ チェック状態や選択状態を簡単に取得できます。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- フォーム操作や DOM の基礎を順序立てて理解したい
checked や selected のような
「入力状態の取得・変更」は、JavaScript の基礎（DOM・イベント・フォーム要素）と密接に関係しています。
書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
チェックボックス・ラジオボタン・セレクトメニューなど、
checked / selected の理解に直結するフォーム操作の基礎が丁寧に解説されています。
この本で解決できること：
- フォーム要素の仕組みを視覚的に理解できる
- DOM を使った状態取得・変更の基礎が分かる
- 実際に動くサンプルで学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
フォーム要素の状態管理・イベント処理・DOM 操作など、
checked / selected の理解に必要な基礎力がしっかり身につきます。
この本で解決できること：
- チェック状態・選択状態の仕組みを体系的に理解できる
- DOM を使ったエレメント操作の基礎が身につく
- 現代的な JavaScript の書き方をまとめて習得
動画で理解を深めたい方へ（Udemy講座）
checked や selected のような
「入力状態の変化」は、実際の動きを動画で見ると理解が一気に深まります。
Udemy ではフォーム操作・DOM・イベント処理を丁寧に解説した講座が多数あります。
初心者のためのJavaScript 完全入門
JavaScriptの基礎を体系的に学べる人気講座です。
チェックボックス・ラジオボタン・セレクトメニューなど、
入力状態の取得・変更に関する基礎がしっかり扱われています。
この講座で解決できること：
- フォーム操作の流れを視覚的に理解できる
checked/selectedの扱いが分かる- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
基礎から応用まで幅広く学べる講座で、フォーム制御や DOM 操作を深く理解したい方に最適です。
checked / selected を使った実務的な UI 制御も学べます。
この講座で解決できること：
- 入力状態の取得・変更など実務的なフォーム制御が身につく
- DOM とイベントを組み合わせた UI 操作を理解できる
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- チェック状態・選択状態の扱いが曖昧なまま進んでしまう
- DOM 操作の基礎が理解しきれない
- イベント処理とフォーム制御の関係がつかみにくい
- コードレビューを受ける機会がない
スクールでは、プロの講師が学習ロードマップを作成し、
checked / selected を含むフォーム操作の基礎を
丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすいフォーム操作のポイントを事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
checked・selected に関するよくある質問（FAQ）
checked と selected の違いは？
checked はチェックボックス・ラジオボタン用、selected はセレクトメニューの項目用です。
checked を複数同時に true にできる？
チェックボックスは複数オンにできますが、ラジオボタンは同じ name の中で1つだけです。
selected を使って初期選択を変更できる？
はい。JavaScript で options[n].selected = true とすれば初期選択を変更できます。
checked / selected の変更は HTML に反映される？
DOM 上では変更されますが、HTML ソースには反映されません。
まとめ
checkedはチェックボックス・ラジオボタンの選択状態を参照／設定するプロパティselectedはセレクトメニューの項目の選択状態を参照／設定するプロパティ- どちらも
true/falseで状態を判定できる - フォーム入力チェックや動的UI制御に必須のプロパティ
