【jQuery】チェック済み(checked)のチェックボックスの値を取得する方法2020.02.08jQueryBこんにちは、ryohei(@ityryohei)です!本記事ではチェック済み(checked)のチェックボックスの値を取得する方法をご紹介しています。チェックボックスの操作でチェック済みの項目を取得して何らかの処理を実行するケースは多くあるかと思います。チェック済みのチェックボックスの値をタグに出力したり、ステップ式のフォームでは次のステップに値を引き継いだり、絞り込み検索で使用したり......と様々あると思います。チェックされているかを判定するのであれば「prop()」や「is()」といったメソッドに通してあげれば良いですが、チェック済みのチェックボックスの値を取得するには一工夫が必要になります。本記事では、チェック済みのチェックボックスを取得して値を出力するところまでご紹介できればと思います。共通で使用するチェックボックスのHTMLチェック済みの要素をセレクターで取得して値を出力するチェック済みの要素をfilter()で取得して値を出力する最後にでは、解説していきます。共通で使用するチェックボックスのHTML本記事ではチェック済みのチェックボックスの値を取得する方法を何パターンかご紹介しています。スクリプトは異なるものを使用しますが、HTMLは共通のものを使用します。下記にサンプルをご用意しておりますが、ご自身で作成されたものがあるようでしたらそちらをご使用ください。4</label></div>チェック済みの要素をセレクターで取得して値を出力するセレクターに「:checked」の疑似クラスを指定してチェック済みのチェックボックスを取得する方法です。チェックボックスと疑似クラスの「:checked」を合わせる形で指定することで、チェック済みのチェックボックスを取得することができます。});});下記はセレクターで取得した際のデモになります。コンソールで確認すると、チェック済みのチェックボックスの値がログに出力されているかと思います。CodePen.チェック済みの要素をfilter()で取得して値を出力するfilter()を使って、チェック済みのチェックボックスを絞り込んで取得します。filter()は指定した要素の中から引数に該当する値で絞り込むメソッドです。疑似クラスの他にも「active」のclassを持っている要素を取得する、等で使用します。});});下記はfilter()で取得した際のデモになります。コンソールで確認すると、チェック済みのチェックボックスの値がログに出力されているかと思います。CodePen.最後にいかがでしたでしょうか。本記事でご紹介した内容は、サイト制作をする際に実装するケースが多い処理となります。同じような処理を実装される場合は本記事の内容を参考にしていただければ幸いです。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。