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

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

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

フォーム内に予め「全選択」と「全解除」のボタンを用意しておき、それらをクリックすることでチェックボックスの全選択・全解除を実現しています。下記にデモを用意していますので、試しに操作していただければと思います。

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

本記事では上記のような疑問にお答えしています。

ちなみに「全選択」のチェックボックスを用意して起き、チェックの「ON/OFF」によって全選択・全解除を切り替える方法は下記の記事でご紹介していますので、併せてご参照いただければと思います。

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

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

なにはともあれまずはチェックボックスを作成します。普通のフォームの大丈夫です。フォームの中にチェックボックスと全選択、全解除ボタンを記述ください。

本記事ではチェックボックスの取得に「class」を使用しますので、共通のクラス名を指定します。

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="check-btn" type="button">全選択</button>

    <button id="uncheck-btn" type="button">全解除</button>

</form>

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

ボタンクリックでチェックボックスを全選択・全解除するスクリプト

では本命のスクリプトを組んでいきます。イベントはボタンクリックで発生しますので、ボタンに対して「addEventListener」を設定します。スクリプトの内容はコメントを入れていますので、そちらをご参照ください。

JavaScript

//全選択ボタンを取得する

const checkBtn = document.getElementById("check-btn");

//全解除ボタンを取得する

const uncheckBtn = document.getElementById("uncheck-btn");

//チェックボックスを取得する

const el = document.getElementsByClassName("checks");

//全てのチェックボックスにチェックを付ける

const checkAll = () => {

    for (let i = 0; i < el.length; i++) {

        el[i].checked = true;

    }

};
//全てのチェックボックスのチェックを外す

const uncheckAll = () => {

    for (let i = 0; i < el.length; i++) {

        el[i].checked = false;

    }

};
//全選択ボタンをクリックした時「checkAll」を実行

checkBtn.addEventListener("click", checkAll, false);

//全選択ボタンをクリックした時「uncheckAll」を実行

uncheckBtn.addEventListener("click", uncheckAll, false);

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

最後に

JavaScriptで〇〇を全選択・全解除するという処理は、基本的に似たような仕組みになっています。一つ覚えてしまえば使い回すことができますので、本記事や他サイト様の記事を参考にしてゆくゆくは自分のスキルにしていただければと幸いです！

以上、JavaScriptでボタンクリックでチェックボックスを全選択・全解除する方法のご紹介でした！