【jQuery】チェック済み（checked）のチェックボックスの値を取得する方法

こんにちは、Ryohei（@ityryohei）です！

本記事ではチェック済み（checked）のチェックボックスの値を取得する方法をご紹介しています。

チェックボックスの操作でチェック済みの項目を取得して何らかの処理を実行するケースは多くあるかと思います。例えば、チェック済みのチェックボックスの値をタグに出力したり、ステップ式のフォームでは次のステップに値を引き継いだり、絞り込み検索で使用したり……と様々あると思います。

チェックされているかを判定するのであれば「prop()」や「is()」といったメソッドに通してあげれば良いですが、チェック済みのチェックボックスの値を取得するには一工夫が必要になります。

本記事では、チェック済みのチェックボックスを取得して値を出力するところまでご紹介できればと思います。

では、解説していきます。

共通で使用するチェックボックスのHTML

本記事ではチェック済みのチェックボックスの値を取得する方法を何パターンかご紹介しています。スクリプトは異なるものを使用しますが、HTMLは共通のものを使用します。

下記にサンプルをご用意しておりますが、ご自身で作成されたものがあるようでしたらそちらをご使用ください。

<div id="app">
    <label><input class="checkbox" type="checkbox" name="checkbox" value="1">Checkbox 1</label>
    <label><input class="checkbox" type="checkbox" name="checkbox" value="2">Checkbox 2</label>
    <label><input class="checkbox" type="checkbox" name="checkbox" value="3">Checkbox 3</label>
    <label><input class="checkbox" type="checkbox" name="checkbox" value="4">Checkbox 4</label>
</div>

チェック済みの要素をセレクターで取得して値を出力する

セレクターに「:checked」の疑似クラスを指定してチェック済みのチェックボックスを取得する方法です。チェックボックスと疑似クラスの「:checked」を合わせる形で指定することで、チェック済みのチェックボックスを取得することができます。

$(function(){
    $('.checkbox').on('change', function(){
        var result = $('.checkbox:checked');
        result.each(function(){
            console.log($(this).val());
        });
    });
});

下記はセレクターで取得した際のデモになります。コンソールで確認すると、チェック済みのチェックボックスの値がログに出力されているかと思います。

See the Pen
Get checked checkbox1｜jQuery by ryohei (@intotheprogram)
on CodePen.

チェック済みの要素をfilter()で取得して値を出力する

filter()を使って、チェック済みのチェックボックスを絞り込んで取得します。filter()は指定した要素の中から引数に該当する値で絞り込むメソッドです。疑似クラスの他にも「active」のclassを持っている要素を取得する、等で使用します。

$(function(){
    var checkbox = $('.checkbox');
    checkbox.on('change', function(){
        var result = checkbox.filter(':checked');
        result.each(function(){
            console.log($(this).val());
        });
    });
});

下記はfilter()で取得した際のデモになります。コンソールで確認すると、チェック済みのチェックボックスの値がログに出力されているかと思います。

See the Pen
Get checked checkbox2｜jQuery by ryohei (@intotheprogram)
on CodePen.