【JavaScript】チェックボックスを全選択／全解除する

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

本記事では、JavaScriptでチェックボックスを全選択／全解除する方法をご紹介しています。

JavaScriptでチェックボックスの全選択／全解除する処理を作りたいんだけど、どうやるんだろう？

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

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

本記事で作成するもの

本記事では、下記デモの内容を作成する方法をご紹介しています。チェックボックスの全て選択をクリックすると対象チェックボックスの全選択・全解除を実行し、チェックボックスに一つずつチェックを入れた場合にも挙動がおかしくならないように配慮しています。

See the Pen Check All | JavaScript by ryohei (@intotheprogram) on CodePen.

基本的に要素のidとclassを指定するだけで流用することができるので、WEBサイトの新規のコーディング時だけでなく改修時にも役立つかと思います。

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

まずはフォームとチェックボックスの作成から。

今回は検証用に複数のチェックボックスを使用します。全て選択のチェックボックスを一つ設置し、idにcheckAllを指定します。他のチェックボックスにはclassにchecksを指定しておきます。

HTML

<form>
    <label><input id="checkAll" type="checkbox" name="lang" value="checkall">全て選択</label>
    <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>
</form>

以上でフォームとチェックボックスの作成は完了です。続いてチェックボックスを全選択／全解除する処理をJavaScriptで作成していきます。

チェックボックスを全選択／全解除する

チェックボックスを全選択／全解除を実装する方法は色々あると思いますが、本記事では全て選択にidを指定し、その他のチェックボックスには共通のclassを指定して実現しています。各行の処理内容につきましててはコメントに記載しておりますので、そちらを参考にしていただければと思います。

JavaScript

//「全て選択」のチェックボックス
let checkAll = document.getElementById("checkAll");
//「全て選択」以外のチェックボックス
let el = document.getElementsByClassName("checks");

//全てのチェックボックスをON/OFFする
const funcCheckAll = (bool) => {
    for (let i = 0; i < el.length; i++) {
        el[i].checked = bool;
    }
}

//「checks」のclassを持つ要素のチェック状態で「全て選択」のチェック状態をON/OFFする
const funcCheck = () => {
    let count = 0;
    for (let i = 0; i < el.length; i++) {
        if (el[i].checked) {
            count += 1;
        }
    }

    if (el.length === count) {
        checkAll.checked = true;
    } else {
        checkAll.checked = false;
    }
};

//「全て選択」のチェックボックスをクリックした時
checkAll.addEventListener("click",() => {
    funcCheckAll(checkAll.checked);
},false);

//「全て選択」以外のチェックボックスをクリックした時
for (let i = 0; i < el.length; i++) {
    el[i].addEventListener("click", funcCheck, false);
}

以上で冒頭でご紹介したデモの内容の完成です。