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

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