【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);
}

DEMO

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

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

最後に

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

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