【JavaScript】単一または複数のチェックボックスの値を取得する

こんにちは、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);
}