こんにちは、Ryohei(@ityryohei)です!

本記事では、JavaScriptで単一または複数のチェックボックスの値を取得する方法をご紹介しています。

チェックされたときにチェックボックスの値を取得したいんだけど、良い方法ないかな?

上記の疑問にお答えできればと思います。

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

チェックボックスの値を取得する流れ

JavaScriptでチェックボックスの値を取得するためには、いくつか工程を踏む必要があります。おおまかな流れとしては下記のようなイメージです。

  • チェックボックスの要素を取得する
  • 取得したチェックボックスがチェック済みがどうか判定する
  • チェック済みであればチェックボックスの値を取得する

上記の流れを単一または複数のチェックボックスで処理してみます。

単一のチェックボックスの値を取得する

まずは単一のチェックボックスで、チェックボックスにチェックが入ったタイミングで値を取得してみます。

HTML

<form>
    <label>
        <input class="check" type="checkbox" name="lang" value="jquery">jQuery
    </label>
</form>

JS

let el = document.getElementById("check");

el.addEventListener("change", () => {
    if (el.checked) {
        window.alert(el.value);
    }
}, false);

DEMO

See the Pen
Get checkbox1 | JavaScript
by ryohei (@intotheprogram)
on CodePen.

上記のデモにてチェックボックスをチェックすると、アラートにチェックされたチェックボックスの値が表示されます。実際にアラートような処理は組まないと思いますので、「if文」の中を変更していただければと思います。

続いて複数のチェックボックスにて、チェックされた際にチェック済みのチェックボックスの値を取得してみたいと思います。

複数のチェックボックスの値を取得する

複数のチェックボックスの場合はスクリプトが若干長くなりますが、やっていることは冒頭でご紹介した内容と同じです。チェックボックスが複数あるので、チェックボックスの数分だけ同じ処理をやっているだけになります。

<form>
    <label>
        <input class="checks" type="checkbox" name="lang" value="jquery">jQuery
    </label>
    <label>
        <input class="checks" type="checkbox" name="lang" value="javascript">JavaScript
    </label>
    <label>
        <input class="checks" type="checkbox" name="lang" value="html">HTML
    </label>
</form>
const getCheckVal = (name)=>{

    let el = document.getElementsByClassName(name);
    let result = [];

    for (let i = 0; i < el.length; i++) {
        if (el[i].checked) {
            result.push(el[i].value);
        }
    }
    return result;
};

let name = "checks";
let el = document.getElementsByClassName(name);
let result = [];

for (let i = 0; i < el.length; i++) {
    el[i].addEventListener("change", () => {
        window.alert(getCheckVal(name));
    }, false);
}

DEMO

See the Pen
Get checkbox2 | JavaScript
by ryohei (@intotheprogram)
on CodePen.

上記は完成時のデモになります。チェックボックスをチェックすると、チェック済みのチェックボックスの値がアラート内に表示されます。14行目の「name」の部分にチェックボックスに付けた「class名」を入れていただければ動きますが、実際に処理する内容はアラートの部分を書き換えてご使用ください。

最後に

JavaScriptでフォームを作成する際にチェックボックスの操作スキルは絶対に必要になりますので、その際に参考にしていただければ幸いです。

以上、JavaScriptで単一または複数のチェックボックスの値を取得する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。