JavaScript - チェックボックスをすべて選択または解除する

JavaScriptで複数のチェックボックスを一括ですべて選択または解除する簡単なコード例を紹介しています。

HTMLには、複数のチェックボックスタグにクラス名「checkbox」を指定して処理しています。
また、すべて選択するボタンと解除するボタンを設置しています。

<div class="item-container">
	<button type="button" id="all-true">すべて選択</button>
	<button type="button" id="all-false">すべて解除</button>
	<div class="checkboxs">
		<p><input type="checkbox" id="checkbox-a" class="checkbox" name="name" value="A">
		<label for="checkbox-a">A</label></p>
		<p><input type="checkbox" id="checkbox-b" class="checkbox" name="name" value="B">
		<label for="checkbox-b">B</label></p>
		<p><input type="checkbox" id="checkbox-c" class="checkbox" name="name" value="C">
		<label for="checkbox-c">C</label></p>
	</div>
</div>

対象とするチェックボックス要素をまとめてquerySelectorAll()で取得しています。

すべて選択する、またはすべて解除するボタンが押されてイベントを実行した場合に、チェックボックスをfor文で処理して選択または解除していきます。

// 対象のチェックボックスをすべて取得する
let checkboxs = document.querySelectorAll('.checkbox');

// すべてチェックするボタンのイベントを作成
document.querySelector('#all-true').addEventListener('click', () => {

	for (const check of checkboxs) {
			check.checked = true;
	}

});

// すべて解除するボタンのイベントを作成
document.querySelector('#all-false').addEventListener('click', () => {

	for (const check of checkboxs) {
			check.checked = false;
	}

});