JavaScriptで全選択チェックボックスを実装する

この記事ではJavaScriptでの全選択チェックボックスの実装を解説します。

全てのチェックボックスにチェックを入れる（外す）全選択チェックボックス
最後に

全てのチェックボックスにチェックを入れる（外す）全選択チェックボックス

はじめに

個人で学習した内容の備忘録として残しておきます。

実装方法は他にも多くあります。本記事が最適とも限りませんのでお気を付けください。

内容等に誤りがありましたらご指摘いただけると幸いです。

仕様

今回作成、解説する全選択チェックボックスの仕様は以下の通りです。

HTMLとJavaScriptを使用
「全選択/全解除」チェックボックスにチェックを入れると他の全てのチェックボックスにもチェックが入る。
「全選択/全解除」チェックボックスのチェックを外すと他の全てのチェックボックスのチェックが外れる。
他の全てのチェックボックスのチェックを入れると「全選択/全解除」チェックボックスにもチェックが入る
他のチェックボックスのチェックを一つでも外すと「全選択/全解除」チェックボックスのチェックも外れる

実際のサンプルは以下になります。

See the Pen Untitled by Yuta Hiruta (@Yuta-Hiruta) on CodePen.

HTML

<!-- All.jsを読み込み -->
<script src="All.js"></script>
<label>
	<!-- 1.全選択チェックボックスが押下された際にcheckAll()を呼び出す -->
	<input type="checkbox" id="all" onclick = "javascript:checkAll()"/>
		全選択
</label>
<label>
	<!-- 2-1.カレーライスのチェックボックスが押下された際にcheckControl()を呼び出す -->
	<input type="checkbox" name="checkbox" onclick = "javascript:checkControl()"/>
		カレーライス
</label>
<label>
	<!-- 2-2.餃子のチェックボックスが押下された際にcheckControl()を呼び出す -->
	<input type="checkbox" name="checkbox" onclick = "javascript:checkControl()"/>
		餃子
</label>
<label>
	<!-- 2-3.チキン南蛮のチェックボックスが押下された際にcheckControl()を呼び出す -->
	<input type="checkbox" name="checkbox" onclick = "javascript:checkControl	()"/>
		チキン南蛮
</label>
</body>

JavaScript

//1.全選択チェックボックスを押下した際に呼ばれるcheckAll()
function checkAll() {
	//1-1.カレーライス、餃子、チキン南蛮を取得
	let boxes = document.getElementsByName("checkbox");
	//1-2.全選択を取得
	let checkBoxAll = document.getElementById("all");
	//1-3.カレーライス、餃子、チキン南蛮のチェックを全選択チェックボックスと同じ状態にする
	for (var i = 0; i < boxes.length; i++) {
		boxes[i].checked = checkBoxAll.checked;
	}
}

//2.カレーライス、餃子、チキン南蛮のチェックボックスを押下した際に呼ばれる
function checkControl() {
	//2-1.カレーライス、餃子、チキン南蛮を取得
	let boxes = document.getElementsByName("checkbox");
	//2-2.全選択を取得
	let checkBoxAll = document.getElementById("all");
	//2-3.カレーライス、餃子、チキン南蛮のチェックが入っている時、全選択のチェックを入れ、
	//    逆にカレーライス、餃子、チキン南蛮のどれかしらのチェックが外れている場合は全選択のチェックを外す。
	if (checkBoxAll.checked) {
		//2-3-1.全選択チェックボックスにチェックが入っている場合
		//      全選択チェックボックスのチェックを外す
		checkBoxAll.checked = false;
	} else if (!checkBoxAll.checked) {
		//2-3-2.全選択チェックボックスにチェックが入っていない場合
		//      一旦全選択チェックボックスのチェックを入れる
		checkBoxAll.checked = true;
		for (var i = 0; i < boxes.length; i++) {
			if (!boxes[i].checked) {
				//2-3-3.「カレーライス」、「餃子」、「チキン南蛮」のどれかしらのチェックが入っていなければ
				//      2-3-2で入れた全選択チェックボックスのチェックを外す
				checkBoxAll.checked = false;
			}
		}
	}
}

最後に

今回は普段の業務で面白いと感じたJavaScriptを使った全選択/全解除チェックボックスについて記事を書かせていただきました。

今後はバックエンド側にも触れていきたいと思います。

以上、JavaScriptで全選択チェックボックスを実装する方法のご紹介でした！