JavaScript - チェックボックスの切り替えイベント

JavaScriptでチェックボックスの切り替えイベントイベントを実装する簡単なコード例を紹介しています。

HTMLには、値の切り替えを検出する対象としたチェックボックスタグにクラス名「checkbox」を指定して処理しています。

<div class="item-container">
	<p id="output">好きな場所をチェックして下さい。</p>
	<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()で全指定、各ボタン要素毎にaddEventListener()で「change」を指定して、値がが切り替えられた結果を取得するイベントを実装しています。

コード例では各チェック要素の切り替えイベント時に切り替えられた結果を「ture」または「false」で出力エリアに表示しています。

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

// 繰り返し処理にてチェックボックスに切り替えイベントを作成する
for (let target of checkboxs) {
	target.addEventListener(`change`, () => {
	console.log(123);
		// 出力エリアに結果を表示する
		document.querySelector(`#output`).innerHTML = `${target.value} :${target.checked}`;
	});
}