こんにちは、Ryohei(@ityryohei)です!

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

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

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

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

本記事で作成するもの

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

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

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

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

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

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

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

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

最後に

JavaScriptでチェックボックスを全選択/全解除はフォームなどでよく使います。本記事ではチェックボックスの中に全て選択を入れた例をご紹介していますが、ボタン形式で実装する方法もありますので、使いやすい方を使用していただければ幸いです。

本記事ではJavaScriptでチェックボックスを全選択/全解除する方法をご紹介していますが、下記の記事でjQueryを持ちて同様の処理を実装する方法をご紹介していますので、jQueryを使用した方法を検討されている場合は併せてご参照いただければ幸いです。

以上、JavaScriptでチェックボックスを全選択/全解除する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。