HOMEJavaScript【JavaScript】単一または複数のチェックボックスの値を取得する【JavaScript】単一または複数のチェックボックスの値を取得する2020.03.31JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptで単一または複数のチェックボックスの値を取得する方法をご紹介しています。チェックされたときにチェックボックスの値を取得したいんだけど、良い方法ないかな?上記の疑問にお答えできればと思います。チェックボックスの値を取得する流れJavaScriptでチェックボックスの値を取得するためには、いくつか工程を踏む必要があります。おおまかな流れとしては下記のようなイメージです。チェックボックスの要素を取得する取得したチェックボックスがチェック済みがどうか判定するチェック済みであればチェックボックスの値を取得する上記の流れを単一または複数のチェックボックスで処理してみます。単一のチェックボックスの値を取得するまずは単一のチェックボックスで、チェックボックスにチェックが入ったタイミングで値を取得してみます。CodePen.上記のデモにてチェックボックスをチェックすると、アラートにチェックされたチェックボックスの値が表示されます。実際にアラートような処理は組まないと思いますので、「if文」の中を変更していただければと思います。続いて複数のチェックボックスにて、チェックされた際にチェック済みのチェックボックスの値を取得してみたいと思います。複数のチェックボックスの値を取得する複数のチェックボックスの場合はスクリプトが若干長くなりますが、やっていることは冒頭でご紹介した内容と同じです。チェックボックスが複数あるので、チェックボックスの数分だけ同じ処理をやっているだけになります。CodePen.上記は完成時のデモになります。チェックボックスをチェックすると、チェック済みのチェックボックスの値がアラート内に表示されます。14行目の「name」の部分にチェックボックスに付けた「class名」を入れていただければ動きますが、実際に処理する内容はアラートの部分を書き換えてご使用ください。最後にJavaScriptでフォームを作成する際にチェックボックスの操作スキルは絶対に必要になりますので、その際に参考にしていただければ幸いです。以上、JavaScriptで単一または複数のチェックボックスの値を取得する方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。