フォームのバリデーションや、チェックに応じた表示切り替えなどで、チェックボックスがチェックされているかを判定したい場面はよくあります。
判定そのものは checkbox.checked で一発ですが、実務では「変化に反応したい」「複数まとめて扱いたい」「全選択チェックを作りたい」といったニーズが続きます。この記事では基本から複数管理までを動くコードで解説します。
checkbox.checked が true / false を返します。状態の変化に反応するなら change イベント、複数のチェック済みをまとめて取得するなら querySelectorAll("...:checked") を使います。1つのチェック状態を判定する（checked）
もっとも基本です。チェックボックス要素の checked プロパティが、チェックされていれば true、外れていれば false を返します。
<label><input type="checkbox" id="agree"> 利用規約に同意する</label> <button id="check">状態を確認</button> <p id="result"></p>
const checkbox = document.getElementById("agree");
const button = document.getElementById("check");
const result = document.getElementById("result");
button.addEventListener("click", () => {
if (checkbox.checked) {
result.textContent = "チェックされています";
} else {
result.textContent = "チェックされていません";
}
});
古い記事では <button onclick="..."> と alert() を使う例が多いですが、現在は addEventListener でJavaScript側にまとめ、結果は画面（DOM）に表示するのが一般的です。要素の取得方法はquerySelector / querySelectorAllの使い方も参考にしてください。
状態が変わった時に反応する（changeイベント）
ボタンを押させずに、チェックを切り替えた瞬間に処理したいときは change イベントを使います。event.target.checked で現在の状態を取得できます。
const checkbox = document.getElementById("agree");
const submitBtn = document.getElementById("submit");
checkbox.addEventListener("change", (event) => {
// チェックされている間だけ送信ボタンを有効化する例
submitBtn.disabled = !event.target.checked;
});
click でも取得できますが、change はキーボード操作（スペースキー）でも発火するためアクセシブルです。フォーム全体の入力監視はフォーム入力をリアルタイムで監視する方法で詳しく扱っています。
複数のチェックボックスを扱う
複数のチェックボックスからチェック済みのものだけを取り出すには、CSSの :checked 疑似クラスと querySelectorAll を組み合わせます。
// チェックされている全てのチェックボックスを取得
const checked = document.querySelectorAll('input[type="checkbox"]:checked');
console.log(`${checked.length}個チェック済み`);
// チェック済みの value を配列で取り出す
const values = [...checked].map((cb) => cb.value);
console.log(values); // 例: ["apple", "orange"]
querySelectorAll が返す NodeList の扱い（forEach や配列変換）はquerySelectorAllで取得した複数要素を操作する方法にまとめています。
全選択チェックと中間状態（indeterminate）
「すべて選択」用の親チェックボックスを作るパターンです。一部だけチェックされている状態は、indeterminate（中間状態）で見た目を「－」にすると分かりやすくなります。
<label><input type="checkbox" id="checkAll"> すべて選択</label> <label><input type="checkbox" class="item" value="a"> A</label> <label><input type="checkbox" class="item" value="b"> B</label> <label><input type="checkbox" class="item" value="c"> C</label>
const all = document.getElementById("checkAll");
const items = document.querySelectorAll(".item");
// 親 → 子（すべてのチェックを合わせる）
all.addEventListener("change", () => {
items.forEach((cb) => { cb.checked = all.checked; });
});
// 子 → 親（全部／一部／ゼロ で親の状態を更新）
items.forEach((cb) => {
cb.addEventListener("change", () => {
const count = document.querySelectorAll(".item:checked").length;
all.checked = count === items.length; // 全部ならON
all.indeterminate = count > 0 && count < items.length; // 一部なら中間
});
});
indeterminate は見た目だけの状態です。checked の値（true/false）には影響しないため、判定では従来どおり checked を見ます。チェックの初期状態を設定する
最初からチェックを入れておきたいときは、HTMLなら checked 属性、JavaScriptなら checked プロパティに true / false を代入します。
const checkbox = document.getElementById("agree");
checkbox.checked = true; // チェックを入れる
checkbox.checked = false; // チェックを外す
HTML属性の checked は初期値を表し、ユーザー操作後の「今の状態」は常に checked プロパティで取得します。フォームをリセットしたときに戻る値（初期値）は defaultChecked で確認できます。
よくある質問（FAQ）
element.checked プロパティが true / false を返します。複数まとめて取得するなら querySelectorAll('input[type=checkbox]:checked') でチェック済みの要素一覧が得られます。change イベントを使い、event.target.checked で状態を確認します。click でも取得できますが、change はキーボード操作（スペースキー）にも対応するためアクセシブルです。element.checked = true（または false）で設定します。HTML属性の checked は初期値の指定に使い、後から変更するときはプロパティへ直接代入します。indeterminate を true にすると、チェックでも未チェックでもない「中間状態（－表示）」になります。ただし見た目だけの状態で、checked の値には影響しません。まとめ
チェックボックスの状態判定は checkbox.checked が基本で、true / false を返します。切り替えた瞬間に反応したいなら change イベント、複数のチェック済みをまとめて取得するなら querySelectorAll("...:checked") を使います。
「すべて選択」を作るときは親子を change で同期し、一部選択は indeterminate で表すと分かりやすくなります。初期状態はプロパティ checked で設定し、判定も常に checked を見れば確実です。
