jQuery でチェックボックスがチェックされているかどうかを確認する

jQueryでチェックボックスの現在の状態を確認するには、DOMのcheckedプロパティを読み取ります。直接取得するには.prop('checked')、セレクターで判定するには.is(':checked')を使います。または、選択したDOMノードを.get(0).checked（または[0].checked）で参照できます。HTMLのchecked属性が表すのはチェックボックスの初期状態であり、その後のユーザー操作による変更は反映されません。(.get())

DOMに直接アクセスしてチェックボックスの状態を確認する

jQueryの選択結果は、該当する要素をまとめたコレクションです。.get(0)はその中の最初のDOM要素を返し、その要素のcheckedプロパティで現在の状態を真偽値として取得できます。配列形式の[0]も同じ要素にアクセスします。どちらも、選択結果に確認したいチェックボックスが含まれている場合に使ってください。

次の例を実行します。

このセクションのコードと表示されるラベルや出力は英語のままです。

const checkbox = { checked: true };
console.log(checkbox.checked ? "Checked" : "Not checked");

Checked

ページでjQueryを読み込んでいる場合、同じ確認は$("#terms").get(0).checkedで行えます。次のブラウザー用ソースには、チェックボックスとボタンを使った例を示しています。これはページのソースであり、実行結果ではありません。

<!doctype html>
<html lang="en">
<body>
  <label><input id="terms" type="checkbox"> Accept the terms</label>
  <button id="check" type="button">Check state</button>
  <p id="result" aria-live="polite"></p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#check").on("click", function () {
      const isChecked = $("#terms").get(0).checked;
      $("#result").text(isChecked ? "The box is checked." : "The box is not checked.");
    });
  </script>
</body>
</html>

複数の要素が該当する可能性がある選択結果でも、.get(0)が返すのは最初の要素だけです。該当する要素がなければ、インデックス0からチェックボックスを取得することはできません。すべての該当要素を調べるにはコレクションを反復処理するか、「該当するものが1つでもチェック済みか」を調べるために.is(':checked')を使います。

.prop()でチェックボックスの状態を確認する

選択した要素の現在のチェック状態は、.prop('checked')で取得できます。

$("#terms").prop("checked")

チェックボックスが1つの場合、チェック済みならこのgetterはtrue、そうでなければfalseを返します。jQueryのコレクションには複数の要素が含まれることがあり、その場合getterが読むのは最初に該当した要素のプロパティです。特定のコントロールの状態を知りたい場合は、その要素を個別に選択してください。

setter形式は現在の状態を変更します。$("#terms").prop("checked", true)でチェックし、falseを渡すとチェックを外します。現在の状態を調べるときはgetter、状態を変えるときはsetterを使います。同じプロパティへのアクセス方法は、ボタンのdisabledなど、ほかの動的なコントロールプロパティにも使えます。プロパティへのアクセスについては、jQueryの.prop()ドキュメントを参照してください。

.is()と:checkedでチェックボックスの状態を確認する

:checkedセレクターは、チェック済みのチェックボックスとラジオボタンに一致します。詳しくはjQueryのセレクタードキュメントを参照してください。.is(':checked')は、選択したjQueryコレクションにこのセレクターへ一致する要素が1つ以上あるかを真偽値で返します。.is()のドキュメントも参照してください。

$("#terms").is(":checked")

選択したチェックボックスがチェック済みかを尋ねる場合に、読みやすい書き方です。たとえば、$("input[name='choice']").is(":checked")は、その名前のグループにチェック済みのチェックボックスが1つでもあればtrueになります。一方、セレクター$("input:checked")が作るのは、チェック済みの入力要素を含むjQueryコレクションです。それ自体は真偽値を返しません。

IDを選択するときは、属性値にハッシュ記号を含めません。$("#terms")または$("input[id='terms']")を使い、$("input[id='#terms']")とは書かないでください。#はIDセレクターの構文に使う記号であり、要素のid属性値には含まれません。

jQueryを使ったチェックボックスの一般的な活用例

次のパターンは現在のcheckedプロパティを使います。自分のID、クラス、フォーム構成に合わせて調整してください。

IDまたはクラスで選択する

対象が決まっている1つのチェックボックスを調べるには、IDを使います。$("#terms").prop("checked")のように記述します。グループに共通するクラスを使う場合は、一致した要素を反復処理して、それぞれの状態を表示できます。

たとえば、$(".option").each(function () { console.log(this.id + ": " + (this.checked ? "checked" : "not checked")); });は、一致した各要素を処理します。ページ上では、クラスがチェックボックス入力に付いていることと、入力要素が存在してからコードが実行されることを確認してください。.each()の中のthisは現在のDOM要素を指すため、そのcheckedプロパティは現在処理しているチェックボックスの状態を表します。

チェック済みの場合だけチェックを外す

チェックを外すだけなら、setterで直接状態を変更できるため、事前の判定は不要です。

$("#terms").prop("checked", false)

チェック済みだった場合にだけ別の処理も行うなら、先にif ($("#terms").is(":checked")) { ... }で判定し、その後にプロパティをfalseに設定します。

コレクション内のすべて、またはいずれかがチェックされているか確認する

グループに対して.is(':checked')を使うと、一致した項目のうち1つでもチェック済みかがわかります。すべての項目がチェック済みかを調べるには、チェック済みの要素数とグループ内のチェックボックス総数を比較します。

たとえば、const $options = $("input.option[type='checkbox']"); const allChecked = $options.length > 0 && $options.filter(":checked").length === $options.length; const anyChecked = $options.is(":checked");で両方の状態を計算できます。

length > 0という条件により、セレクターに一致するチェックボックスがない場合、「すべてチェック済み」はfalseになります。フォームのグループでは、通常この解釈が役立ちます。空のグループに別の扱いが必要な場合は、アプリケーションで明示的に決めてください。

チェックボックスの状態に応じて送信ボタンを有効にする

無効になっている可能性のあるボタンのクリックを待つのではなく、チェックボックスの状態が変わったときにボタンを更新します。

たとえば、const update = () => $("#submit").prop("disabled", !$("#terms").is(":checked"));を定義し、$("#terms").on("change", update)でイベントを登録した後、update()を一度呼び出します。これにより、ページ読み込み時に初期状態が反映され、その後もユーザーがチェックボックスを切り替えるたびにボタンが同期します。#submitはフォーム内の実際の送信コントロールに合わせてください。

HTMLのchecked属性は、ページの初期化時にチェックボックスの既定のチェック状態を設定します。DOMのcheckedプロパティは、ユーザー操作やスクリプトによる変更後の現在の状態を表します。.attr('checked')は属性を読み取ります。現在の状態を調べるには.prop('checked')または.is(':checked')を使ってください。したがって、チェックボックスについて.attr()と.prop()が答えるのは、それぞれ異なる問いです。