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

1. チェックボックスが直接 DOM 操作で .get() メソッドを使用してチェックされているかどうかを確認する
2. チェックボックスが .prop() メソッドでチェックされているかどうかを確認する
3. チェックボックスが .is() メソッドでチェックされているかどうかを確認する
4. チェックボックスが jQuery でチェックされているかどうかをチェックするための一般的な使用例

このブログ投稿でチェックされている jQuery チェックボックスのいくつかの方法を学びます。また、各ユースケースに最適な方法を選択できるように、パフォーマンスメトリックについても説明します。

一般的なチェックボックスの使用例に役立つショートカットを示します。また、人々が犯す一般的なエラーの落とし穴もあります。

チェックボックスが直接 DOM 操作で .get() メソッドを使用してチェックされているかどうかを確認する

jQuery を使用すると、.get() メソッドを使用して各 jQuery オブジェクトの下の DOM ノードにアクセスできます。次に、この DOM ノードにクエリを実行して、さまざまなプロパティに直接アクセス/設定できます。

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[name='checkboxArray']").get(0).checked?'The first box is checked':'The first box is not checked'}
    // <p/>`);
});

このコードの動作デモを以下に示します。

このコードを分解してみましょう。 （コードをよりよく理解するには、添付の HTML ファイルと CSS ファイルを参照してください。）

チェックイベントをトリガーするボタンを選択し、クリックイベントにコールバックをアタッチします。コールバックでは、チェック結果をテキストとして p 要素に追加して表示します。jQuery.html() メソッドを使用します。

この jQuery メソッドは、以前のテキストを上書きすることに注意してください。これは、ここでの望ましい使用例です。新しいチェックごとに新しい HTML 出力が必要です。

主なチェックロジックは、.html() メソッドに渡す行にあります。まず、jQuery オブジェクトで name = 'checkboxArray'を持つすべての入力要素を選択します。

セレクターは jQuery オブジェクトのみを返し、基になる DOM ノードにはまだアクセスできないことに注意してください。

しかし、次に、.get メソッドをチェーンします。たとえば、.get(0) です。これで、jQuery が選択したコレクションの最初の DOM ノードにアクセスできます。

最初のチェックボックスがオンになっているかどうかを確認するため、.get() メソッドの引数として 0 を渡すことにより、最初の DOM ノードにアクセスします。

これで、jQuery の .checked プロパティに直接アクセスして、チェックボックスが選択されているかどうかを確認できます。

プロのヒント 1：

上記でアクセスする .checked プロパティは、DOM ノードにアタッチされた JavaScript プロパティ（または、技術的には IDL プロパティ）です。これは、HTML 要素の初期値またはデフォルトのチェック済み/チェックなしの値（技術的には HTML コンテンツプロパティ）のみを表示する HTML の checked 属性とは異なります。

この違いについては、このブログ投稿の後半で詳しく説明します。

プロのヒント 2：

直接 DOM 操作は超高速です。したがって、このメソッドでは、jQuery を使用して、チェックボックスが優れたパフォーマンスでチェックされているかどうかを確認できます。

ショートカットチェックボックスが参照解除演算子を使用した直接 DOM 操作でチェックされているかどうかを確認する

各 jQuery は配列オブジェクトのように動作します。したがって、この動作を把握し、.get メソッドの代わりに短い配列参照解除演算子 [] を使用して一部のコードを減らすことができます。

$("button").on("click",function(){
    $("p").html(`<p>
    // ${$("input[name='checkboxArray']")[0].checked?'The first box is checked':'The first box is not checked'}
    // <p/>`);
});

コードは、参照解除演算子の使用を除いて上記と同じです：... $("input[name = 'checkboxArray']")[0]...。

チェックボックスが .prop() メソッドでチェックされているかどうかを確認する

DOM ノードに直接アクセスする代わりに、jQuery.prop() メソッドを使用して、要素から基になる JavaScript プロパティを抽出することもできます。

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[name='checkboxArray']").prop('checked')?'The first box is checked':'The first box is not checked'}
    <p/>`);
});

このコードの動作デモを以下に示します。

ほとんどのコードは上記と同様です。主な違いがある行を見てみましょう。つまり、次のとおりです。

 $("input[name='checkboxArray']").prop('checked')...

上記と同じ .checked プロパティを抽出しますが、ここでは jQuery.prop() メソッドを使用します。

プロのヒント：

なぜ jQuery.prop() メソッドを使用するのですか？jQuery.prop() メソッドも高速操作です（次に示すセレクターベースのメソッドと比較して）。

JavaScript または jQuery などの JS ベースのライブラリを使用して DOM 要素のプロパティをクエリすることをお勧めします。

チェックボックスが .is() メソッドでチェックされているかどうかを確認する

:checked セレクターと .is() メソッドを組み合わせて、jQuery を使用してチェックボックスがオンになっているかどうかを確認します。

:checked セレクターは、選択またはチェックされたすべての要素を返します。チェックボックスの場合、チェックされているボックスを選択することを意味します。

$("some selector:checked");

// returns those elements that are checked

:checked セレクターの詳細については、こちらをご覧ください。

.is() メソッドは、jQuery オブジェクトをセレクターと照合し、そのセレクターと一致する場合は true を返します。

$("some jQuery object").is("some_selector");

//returns true if the jQuery object matches the selector

.is() メソッドの詳細については、こちらをご覧ください。

2つを 1つのコードに組み合わせて、チェックボックスが jQuery でチェックされているかどうかを確認しましょう。

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[id='#first']").is(":checked")?'The first box is checked':'The first box is not checked'}
    <p/>`);
});

以下のこのメソッドのデモをご覧ください。

イベントハンドラーとコールバックを設定するコードは、以前のメソッドと同様です。主な変更点は、次のようにチェックの実装にあります。

$("input[id = '#first']").is(":checked")...

:checked セレクターを引数として渡すため、最初の ID のチェックボックスがオンになっている場合、.is() メソッドは true を返します。

プロのヒント：

is() メソッドは、新しい jQuery オブジェクトを作成したり、元のオブジェクトを変更したりしません。この動作により、コールバックおよびイベントハンドラーでの使用が理想的になります。

チェックボックスが jQuery でチェックされているかどうかをチェックするための一般的な使用例

基本的な方法を確認したので、一般的な使用例のためにいくつかの既製のクイックスクリプトを作成しましょう。

要素の ID を使用してチェックボックスがチェックされているかどうかを確認する

次のコードで要素の ID を使用してチェックを行うことができます。

$("button").on("click",function(){
    $("p").html(`<p>
    ${$("input[id='#second']").is(":checked")?'The second box is checked':'The secong box is not checked'}
    <p/>`);
});

属性 equals セレクターを使用して、ID が second のチェックボックスを選択し、id='#second'オプションを渡します。

以下に実際のデモンストレーションを見ることができます。

クラスを使用してチェックボックスがチェックされているかどうかを確認する

共通のクラスを持つチェックボックスのグループを選択して、それらがチェックされているかどうかを確認することもできます。コードはとても簡単です。

$("button").on("click",function(){
    $("p").html(' ');
    $("input[class='non-first']").each(function(){
        $("p").append(`
        ${$(this).is(":checked")? 'The ' + $(this).attr("id") + ' box is checked':'The ' + $(this).attr("id") +' box is not checked'}
        <br> `);
    });
});

ファーストクラス以外のすべてのチェックボックスを選択してから、.each() メソッドを使用して各チェックボックスを繰り返します。最後に、反復ごとにチェックを実行し、出力を p 要素に追加します。

前の反復の出力を上書きしたくないため、このユースケースでは append() メソッドを使用することに注意してください。

以下の動作デモをご覧ください。

jQuery でチェックされている場合は、チェックボックスをオフにする

jQuery でチェックされている場合は、次のスニペットを使用してチェックボックスをオフにします。

$("button").on("click",function(){
    // To find the checked boxes by ID
    let $checkedBox = $("input[id ='first']");
    // To run the check and toggle if the checkbox is checked
    if ($checkedBox.is(':checked')){
        $checkedBox.prop("checked", false);
    }
});

ここでは、.prop() メソッドの set 形式を使用します。

$(some_jQuery_object).prop("checked",false);

// sets the "checked" property to false for the selected jQuery object

このスニペットの動作デモはここで見ることができます：

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

次の定型文を使用して、特定のコレクションのすべてのチェックボックスがオンになっているかどうかを確認できます。

$("button").on("click",function(){
    let result = true;
    // To find the list of checked boxes in an array of related checkboxes
    let $checkedList = $("input[name='checkboxArray']");
    // To iterate and do something with each checked box on the list above
    // Here we display info related to them in the DOM
    $checkedList.each(function(){
    if (!($(this).is(":checked"))){
        result = false;
    }
    });
    // to display the number of checked boxes
    $("p").html(`All checkboxes are ${result?'':'not'} checked`);
});

ここでスニペットの動作デモを見ることができます：

このコードのロジックを分解してみましょう。

上記のようにイベントハンドラーをアタッチし、コレクション内の各チェックボックスを繰り返します。次に、各チェックボックスで .each() 関数を実行し、チェックボックスがオンになっていない場合は、result 変数を false に変更します。

最後に、結果を出力します。

特定のコレクションで jQuery を使用してチェックボックスがオンになっているかどうかを確認する

次のコードを使用して、チェックボックスの少なくとも 1つがチェックされているかどうかを確認できます。

$("button").on("click",function(){
    let result = false;
    // To find the list of checked boxes in an array of related checkboxes
    let $checkedList = $("input[name='checkboxArray']");
    // To iterate and do something with each checked box on the list above
    // Here we display info related to them in the DOM
    $checkedList.each(function(){
    if ($(this).is(":checked")){
        result = true;
    }
    });
    // to display if any (at least) one of the checkboxes is checked
    $("p").html(`At least one checkbox in the given collection is ${result?'':'not'} checked`);
});

最初に、以下の実際のデモンストレーションで実際のメソッドを見てみましょう。

ロジックは単純です。コレクション内のすべてのチェックボックスでチェックを実行し、チェックボックスの 1つでもチェックされている場合は、result 変数を true に変更します。

それ以外の場合は、result 変数の値を false に保ち、それに応じてメッセージを出力します。

jQuery でチェックボックスがオフになっている場合は送信ボタンを無効にする

特定のチェックボックスがオフになっている場合に送信ボタンを無効にする簡単なスニペットを作成できます。

$("button").on("click",function(){
    // To find the specific checkbox
    let $checkedBox = $("input[id='third']");
    let $submitBtn = $("input[name='submitBtn']");
    if ($($checkedBox).is(":checked")){
        $submitBtn.prop("disabled",false);
    }
    else {
        $submitBtn.prop("disabled",true);
    }
});

このソリューションの出力を以下に示します。

ロジックは単純です。上記のメソッドと同様に、チェックボックスが .is() メソッドと:checked セレクターでチェックされているかどうかを判断します。

チェックボックスがオンになっている場合、submitBtn 要素の disabled プロパティを false に設定します。それ以外の場合は、true に設定します。

チェックボックスが jQuery でチェックされているかどうかをチェックするための .attr() メソッドの非推奨の使用

HTML 属性は DOM プロパティとは異なります。多くの場合、プロパティは HTML 属性と一致しますが、常に一致するとは限りません。

チェックボックスの場合と同様に、HTML のチェック済み属性は、要素のデフォルトまたは初期のチェック済み/非チェック状態のインジケーターにすぎません。これは、要素の現在のチェック/非チェック状態を示すチェック済み DOM プロパティには対応していません。

jQuery.attr() メソッドは HTML 属性のみを参照します。したがって、この方法を使用して、チェックボックスが選択されているかどうかを確認しないでください。

以前は jQuery でこれを行うことができましたが、バージョン 1.6 では、DOM プロパティに明示的にアクセスするために .prop() メソッドが追加され、.attr() が HTML 属性のみに制限されたときに動作が変更されました。

jQuery が属性とプロパティを異なる方法で処理する方法について詳しくはこちらをご覧ください。