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

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

実際の動きは下記のデモをご確認ください。「全て選択」クリックで全選択と全解除を実行し、チェックボックスに一つずつチェックを入れた場合にも挙動がおかしくならないように配慮しています。

DEMO

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

id」と「class」を指定するだけなので、サイトの新規のコーディング時だけでなく改修時にも役立つかと思います。

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

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

まずはフォームとチェックボックスの作成から。今回は検証用に複数のチェックボックスを使用します。「全て選択」を一つ設置し、「id」に「checkAll」を指定します。他のチェックボックスには「class」に「checks」を指定しておきます。

HTML


<div id="app">
<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>
</div>

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

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

チェックボックスを全選択/全解除を実装する方法は色々あると思いますが、本記事では「全て選択」に「id」を指定し、その他のチェックボックスには共有の「class」を指定していますので、この二つを使用してスクリプトを組んでいきます。

処理内容の詳細についてはコメントwp記載しておりますので、そちらを参考にしていただければと思います。

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でチェックボックスを全選択/全解除する方法のご紹介でした!