今回は JavaScript を使って「複数のチェックボックスから選択された値を取得する方法」を紹介します。
デモ動画
このサンプルでは
- ３つのチェックボックスを用意
- 「値を取得」ボタンを押す
- 選択されたチェックボックスの value を取得
- 取得した値をアラートで表示
という流れで行います。
頻繁に使うものではないので、つい忘れがちになってしまいますが、知っておくと便利なコードです。ラジオボタンにも使うことができますので、ぜひお試しください🙂
動画
準備中
解説
HTML の用意
まずは HTML ファイルを作成して、以下のようにコードを書きます。
class 名について
それぞれのチェックボックスには同じクラス名 checks をつけています。
チェックボックスの値を取得するときに「class 名が checks の要素」と指定するので、同じクラス名を付けてください。
12行目 onclick
このボタンを押したときに getValue 関数を呼ぶために、onclick="getValue()" と書いています。
getValue 関数はこのあと書いていきます。
CSS を書く
チェックボックスが画面左上にあって使いにくいので、CSS で少しだけ調整します。（この手順は省略可能です。）
6~15行目を追加します。
このような画面になっていれば、準備完了です。
チェックボックスの値を取得する
14~26行目を追加します。
JavaScript コードでは
- クラス名が checks の要素を取得
- for ループでチェックボックスが選択されているか一つずつ調べる
- アラートで値を表示
という処理を行っています。
19行目 for ( i = 0; i < 3; i++) {
今回は「3つのチェックボックス」と最初に決めていたので３を書いていますが、たくさんチェックボックスがある場合などは checks.length と書くこともできます。
for ( i = 0; i < checks.length; i++) {
20行目 if ( checks[i].checked === true )
checks[i].checked が true の場合は、チェックボックスが選択されている状態なので、str に文字列を結合していきます。
24行目 alert(str)
最後にアラートを表示して完成です。
完成
上手く動かない場合は、ウェブブラウザの開発者ツールを開いてコンソールから確認してみてください。
それでも解決しない場合は、下にサンプルコードを貼っているので見比べてみてください🙂
サンプルコード
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。
オンラインスクールを選ぶときのポイント
- 無料体験があること
- 個別サポートがあること
自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。（無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。）
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。
ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
1. TechAcademy（テックアカデミー）
オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。
2. CodeCamp（コードキャンプ）
一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。
3. Treehouse
英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。
