【JavaScript】チェックされているチェックボックスの数をカウントする

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでチェックされているチェックボックスの数をカウントする方法をご紹介しています。

チェックボックスにチェックを入れた際にカウントするのではなく、チェックを入れた後にボタンをクリックするとチェック済みの数がアラートで表示される下記のような処理を作成していきます。

See the Pen
PoqgRZw by ryohei (@intotheprogram)
on CodePen.

上記の疑問にお答えしています。

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

チェックボックスを作成する

まずはチェックボックスの作成から。チェックボックスは基本的にフォームで使用するパーツですのでformタグで囲っておきます。併せてチェックボックスの他にイベントを発生させるためにボタンも記述しておきましょう。

HTML

<form>
    <label>
        <input class="checks" type="checkbox" name="lang" value="javascript">JavaScript
    </label>
    <label>
        <input class="checks" type="checkbox" name="lang" value="jquery">jQuery
    </label>
    <label>
        <input class="checks" type="checkbox" name="lang" value="html">HTML
    </label>
    <button id="btn" type="button">Count</button>
</form>

以上でチェックボックスの作成は完了です。

チェック済みのチェックボックスの数をカウントする

前項で作成したHTMLにチェック済みのチェックボックスの数をカウントするスクリプトを追加します。

下記はサンプルコードになります。buttonをクリックするとチェック済みのチェックボックスの数をカウントする関数を実行する流れとなります。詳細はコメントをご確認ください。

JavaScript

//チェックボックスを取得する
const el = document.getElementsByClassName("checks");
//カウントボタンを取得する
const btn = document.getElementById("btn");

//チェック済みのチェックボックスの数を返す
const getCheckedCount = () => {

    let count = 0;

    for (let i = 0; i < el.length; i++) {
        if (el[i].checked) {
            count++;
        }
    }
    alert(count);
};

//ボタンをクリックした時に「getCheckedCount()」を呼び出す
btn.addEventListener("click", getCheckedCount, false);

以上でスクリプトの作成は完了です。

最後に

チェックボックスのチェック済みの数をカウントする処理は、入力必須の処理であったり前提として〇〇以上のチェックが必要、というような処理を組む際に有効な方法です。重要なのはforの処理の部分ですので、そこだけ覚えておいていつでも組めるようにしておくと良いかもしれません。

以上、JavaScriptでチェックされているチェックボックスの数をカウントする方法のご紹介でした！