【2024年最新版】jQueryでチェックボックスをチェックする4つの方法

2024-04-02

jQueryでチェックボックスをチェックする方法

// チェックボックスにチェックを入れる
$("input[type='checkbox']").prop("checked", true);

// チェックボックスのチェックを外す
$("input[type='checkbox']").prop("checked", false);

prop() メソッドは、チェックボックスの checked 属性を直接操作します。最もシンプルで効率的な方法ですが、IE8 以前のブラウザではサポートされていないため、注意が必要です。

メリット:

シンプルで効率的
すべてのブラウザで動作する (IE8 以前を除く)

IE8 以前では動作しない

// チェックボックスにチェックを入れる
$("input[type='checkbox']").attr("checked", "checked");

// チェックボックスのチェックを外す
$("input[type='checkbox']").removeAttr("checked");

attr() メソッドは、チェックボックスの checked 属性の値を設定・削除します。IE8 以前のブラウザでも動作しますが、prop() メソッドよりも処理速度が遅くなります。

prop() メソッドよりも処理速度が遅い

// チェックボックスにチェックを入れる
$("input[type='checkbox']").checked = true;

// チェックボックスのチェックを外す
$("input[type='checkbox']").checked = false;

checked プロパティは、チェックボックスのチェック状態を直接取得・設定できます。最も簡潔な方法ですが、他の方法と比べてコードの可読性が低くなります。

簡潔

コードの可読性が低い

上記の3つの方法の中で、どの方法を使うべきかは、以下の条件によって異なります。

ブラウザの対応状況
処理速度

IE8 以前のブラウザをサポートする必要がある場合は、attr() メソッドを使う必要があります。処理速度を重視する場合は、prop() メソッドを使うのがおすすめです。コードの可読性を重視する場合は、checked プロパティを使うことができます。

その他の注意点

上記のコードは、すべてのチェックボックスにチェックを入れる/外す場合の例です。特定のチェックボックスのみを操作したい場合は、セレクターを変更する必要があります。
チェックボックスの状態を変更した後に、何か処理を実行したい場合は、change イベントを使用する必要があります。

HTML

<input type="checkbox" id="checkbox1">
<input type="checkbox" id="checkbox2">
<input type="checkbox" id="checkbox3">

JavaScript

// チェックボックスにチェックを入れる
$("#checkbox1").prop("checked", true);
$("#checkbox2").attr("checked", "checked");
$("#checkbox3").checked = true;

// チェックボックスのチェックを外す
$("#checkbox1").prop("checked", false);
$("#checkbox2").removeAttr("checked");
$("#checkbox3").checked = false;

// チェックボックスの状態が変更された時に処理を実行
$("input[type='checkbox']").change(function() {
  // ここに処理を記述
});

このコードを実行すると、以下のようになります。

最初に、checkbox1 には prop() メソッド、checkbox2 には attr() メソッド、checkbox3 には checked プロパティを使ってチェックを入れます。
最後に、チェックボックスの状態が変更された時に、change イベントが発生し、// ここに処理を記述 の部分に記述した処理が実行されます。

jQueryでチェックボックスをチェックするその他の方法

$("input[type='checkbox']").click();

click() メソッドは、チェックボックスをクリックした時の動作をシミュレートします。すべてのブラウザで動作しますが、他の方法と比べて処理速度が遅くなります。

すべてのブラウザで動作する

処理速度が遅い

$("input[type='checkbox']").trigger("click");

trigger() メソッドは、チェックボックスに対して click イベントを発生させます。click() メソッドと同様に、すべてのブラウザで動作しますが、処理速度が遅くなります。

$("input[type='checkbox']").change();

change() メソッドは、チェックボックスの状態が変更された時に発生する change イベントを発生させます。他の方法と比べて処理速度が速くなりますが、チェックボックスの状態が変更されていない場合は何も起こりません。

チェックボックスの状態が変更されていない場合は何も起こらない

$("input[type='checkbox']").each(function() {
  $(this).prop("checked", true);
});

each() メソッドは、チェックボックスの個別に処理を実行することができます。他の方法と比べて処理速度が遅くなりますが、ループ処理を使って複雑な処理を行うことができます。

ループ処理を使って複雑な処理を行うことができる

上記の方法はそれぞれメリットとデメリットがあります。どの方法を使うべきかは、以下の条件によって異なります。

処理内容

すべてのブラウザで動作する必要がある場合は、click() メソッドまたは trigger() メソッドを使う必要があります。処理速度を重視する場合は、change() メソッドを使うのがおすすめです。コードの可読性を重視する場合は、prop() メソッドまたは attr() メソッドを使うことができます。ループ処理を使って複雑な処理を行う必要がある場合は、each() メソッドを使うことができます。

jquery checkbox