HTML

このページでできるようになること

• checked を付ける場所（<input type="checkbox">/radio）を迷わず判断できる
• boolean属性としての書き方（checked だけでOK）を、試験の正誤判定で外さない
• フォーム送信で送られる条件（オンのときだけ name=value が送られる）を説明できる
• JavaScript の checked / defaultChecked の違いでハマらない
• ラベル（<label>）と一緒に“押しやすいUI”として実装できる
• 実務で起きがちな事故（ラジオの複数 checked / name 不一致 / value 未設定）を避けられる

まずは直感：checked って何？

checked は「ページ読み込み直後の選択状態（デフォルト）」を指定します。

ユーザーがクリックして状態を変えると、その後の状態は checked 属性ではなく input.checked（プロパティ）として扱われます。

最小デモ：まず動かす

チェックボックスとラジオで、初期状態がどう変わるかを体感します。

<!-- checkbox -->
<label><input type="checkbox" name="news" value="on" checked> 受け取る</label>

<!-- radio（同じ name でグループ化） -->
<label><input type="radio" name="plan" value="basic" checked> Basic</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>

document.addEventListener("change", (e) => {
	const input = e.target.closest("input[type=checkbox], input[type=radio]");
	if (!input) return;
	console.log(input.name, input.checked, input.value);
});

基本の書き方（最短の型）

checked は boolean属性なので、属性名だけで意味が成立します。

<input type="checkbox" name="agree" value="yes" checked>

<!-- 値を省略しても動くが、読みやすさと正誤判定のために避ける -->
<!-- <input checked="checked"> は古い書き方としてはOK -->

• 実務：読みやすさ重視なら checked だけで統一する
• 試験：checked="false" は 無効化ではない（付いている時点で真）に注意

どの要素に使える？（対象）

checked は、基本的に <input> のうち次の type に対して使います。

使う

<input type="checkbox"> / <input type="radio">

使わない

それ以外の <input>（text/password/email など）や、<select>/<option>（こちらは selected）

「選択済み」を表したい対象が radio/checkbox 以外なら、別の属性（例：selected/open）を検討します。

フォーム送信で何が起きる？（仕様のコア）

送信される条件は次のとおりです。

• checkbox：checked（オン）のときだけ、その input の name=value が送られる
• radio：同じ name のグループで オンの1つ だけが送られる

つまり checked は「見た目」だけでなく、送信データの有無を決めるスイッチです。

(() => {
	const form = document.querySelector("#demoCheckedForm");
	const out = document.querySelector("#demoCheckedOut3");
	if (!form || !out) return;

	function dump() {
		const params = new URLSearchParams(new FormData(form));
		out.textContent = params.toString() || "(no data)";
	}

	form.addEventListener("change", dump);
	form.addEventListener("reset", () => setTimeout(dump));
	form.addEventListener("submit", (e) => {
		e.preventDefault();
		dump();
	});
	dump();
})();

JavaScript：checked と defaultChecked の違い

属性（checked）は「初期状態」、プロパティ（input.checked）は「いまの状態」です。

input.checked

現在オンかどうか（ユーザー操作やスクリプトで変わる）

input.defaultChecked

読み込み時の既定（checked 属性に対応）。form.reset() で戻る先

アクセシビリティ：label とセットで考える

• クリックしやすいUIにするなら、<label> で入力と文言をひとまとまりにする
• 状態の読み上げ（オン/オフ）は支援技術が自動で扱うので、aria-checked をむやみに足さない
• チェックの意味が文脈だけだと曖昧なら、ラベル文言を具体的にする（例：「同意する」だけでなく「利用規約に同意する」）

実務で起きがちな事故と回避策（効かないを最短で潰す）

症状：radio が複数オンになっているように見える

原因候補：name が揃っていない（別グループ扱い）。解決：同じ選択肢セットは name を同一にする。

症状：checkbox の送信値が期待と違う

原因候補：value 未指定。解決：送る値が意味を持つなら value を明示する（例：yes/newsletter）。

症状：リセットで戻らない

原因候補：属性ではなく JS で初期値を作っている。解決：初期状態は checked（属性）で表し、JS は「現在値」を更新する。

症状：checked="false" にしたのにオンのまま

原因：boolean属性のため。解決：オフにしたいなら属性自体を外す（または JS で input.checked = false）。

試験で問われやすいポイント（ひっかけ回避）

• checked は boolean属性：checked="false" は「オフ」ではない
• radio は同じ name の中で1つだけ選ばれる（checked が複数あっても最終的に1つになる）
• オンのものだけが送信される（オフの checkbox は送られない）
• checked は <option> ではなく selected

FAQ

checked を後から切り替えるには？

属性ではなく input.checked（プロパティ）を更新します。

checkbox がオフのときも必ず送信したい

hidden を併用して既定値を送り、checkbox がオンなら上書きする設計が定番です（ただしサーバー側での整合チェックも必須）。

ラジオを未選択にできますか？

初期状態でどれも checked を付けなければ未選択にできます。ユーザーが一度選ぶと、通常のUIでは「未選択へ戻す」は用意されないことが多いので、要件次第で「未選択」用の選択肢を別途用意します。