jQuery checked 判定

jQueryでチェックボックスがチェックされているか判定する方法

jQueryでチェックボックスがチェックされているか判定する方法

この記事では、jQueryを使ってチェックボックスがチェックされているかどうかを判定する方法を分かりやすく解説します。初心者の方でも理解しやすいよう、サンプルコードと具体的な解説を交えながら説明していきます。

チェックボックスの状態判定の基本

:checked セレクタを使用すると、チェックされているチェックボックスのみを取得することができます。


<input type="checkbox" name="hobby" value="reading" checked>読書
<input type="checkbox" name="hobby" value="sports">スポーツ
<input type="checkbox" name="hobby" value="music" checked>音楽


// チェックされているチェックボックスを取得
var checkedItems = $('input[type="checkbox"]:checked');

// チェックされているチェックボックスの数を取得
var checkedCount = checkedItems.length; 

// チェックされているチェックボックスの値を取得
checkedItems.each(function() {
  console.log($(this).val()); // "reading", "music"
});

特定のチェックボックスの状態判定

is(':checked') メソッドを使用すると、特定のチェックボックスがチェックされているかどうかを判定することができます。


<input type="checkbox" id="myCheckbox">チェックボックス


// IDが"myCheckbox"のチェックボックスがチェックされているかどうか判定
if ($('#myCheckbox').is(':checked')) {
  // チェックされている場合の処理
  console.log("チェックされています");
} else {
  // チェックされていない場合の処理
  console.log("チェックされていません");
}

prop()メソッドを使った判定 (jQuery 1.6以降)

jQuery 1.6以降では、prop('checked') メソッドを使ったチェック状態の判定が推奨されています。 prop() メソッドは、要素のプロパティにアクセスするためのメソッドです。


<input type="checkbox" id="myCheckbox">チェックボックス


// IDが"myCheckbox"のチェックボックスがチェックされているかどうか判定
if ($('#myCheckbox').prop('checked')) {
  // チェックされている場合の処理
  console.log("チェックされています");
} else {
  // チェックされていない場合の処理
  console.log("チェックされていません");
}

チェック状態の変化を検知する

change イベントを使用すると、チェックボックスの状態が変化した時に特定の処理を実行することができます。


<input type="checkbox" id="myCheckbox">チェックボックス


// チェックボックスの状態が変化した時に実行する処理
$('#myCheckbox').change(function() {
  if ($(this).is(':checked')) {
    // チェックされた場合の処理
    console.log("チェックされました");
  } else {
    // チェックが外された場合の処理
    console.log("チェックが外されました");
  }
});

まとめ

この記事では、jQueryを使ってチェックボックスの状態を判定する方法について解説しました。様々な方法を紹介しましたが、状況に応じて最適な方法を選択してください。

参考資料

よくある質問

Q1. prop() メソッドと attr() メソッドの違いは何ですか？

A1. prop() メソッドは、要素のプロパティにアクセスするためのメソッドであり、attr() メソッドは、要素の属性にアクセスするためのメソッドです。チェックボックスの状態を表すには、prop('checked') を使用します。

Q2. 複数のチェックボックスの状態をまとめて判定することはできますか？

A2. はい、可能です。:checked セレクタと each() メソッドを組み合わせることで、複数のチェックボックスの状態をまとめて判定することができます。

Q3. チェックボックスの状態が変化した時に、特定の処理を実行したいのですが、どのようにすればよいですか？

A3. change イベントを使用することで、チェックボックスの状態が変化した時に特定の処理を実行することができます。

その他の参考記事:jquery checked