JavaScript | チェックボックスの入力イベントを実装する方法

2021-12-08JavaScript,JavaScript イベント

JavaScript

JavaScriptでチェックボックスの入力をトリガーにしたイベントの実装方法紹介しています。

チェックボックスの入力イベントサンプル

チェックボックスをトリガーにした入力、オンオフを取得するイベントの動作サンプルとJavaScriptサンプルコードです。

See the Pen CSS | Difference between gap and margin by yochans (@yochans) on CodePen.

HTMLにはラベルを使った一般的なチェックボックスを配置しています。

JavaScriptでセレクタを指定するのにname属性を指定していますので、class属性は指定していません。
CSSなどデザイン面でclassを指定している場合はJavaScriptでの取得にclass名を使って下さい。

「#output」はテスト出力用です。

<div class="container">
	<p><input type="checkbox" id="checkbox1" name="fruits" value="apple">
	<label for="checkbox1">Apple</label></p>
	<p><input type="checkbox" id="checkbox2" name="fruits" value="banana">
	<label for="checkbox2">Banana</label></p>
	<p><input type="checkbox" id="checkbox3" name="fruits" value="pine">
	<label for="checkbox3">Pine</label></p>
</div>

<p id="output"></p>

チェックボックスの要素を取得するのにquerySelectorAll()を利用しています。
input[type=’checkbox’][name=’fruits’]と指定する事でチェックボックスのHTML要素を配列として取得します。

取得したチェックボックスの配列を繰り返し文で回しながら、全てのチェックボックスにaddEventListener('change’)で変更があった場合のイベントを実装しています。

イベント発火時の状態を「value」でチェックボックスの値、「checked」で状態をtrueまたはfalseで取得します。

let targets = document.querySelectorAll(`input[type='checkbox'][name='fruits']`);

for (let target of targets) {
	target.addEventListener('change', function () {
			document.querySelector('#output').innerHTML = `${target.value} : ${target.checked}`;
		});
}

こちらは上記サンプルコードのアロー関数版になります。

let targets = document.querySelectorAll(`input[type='checkbox'][name='fruits']`);

for (let target of targets) {
	target.addEventListener('change', () => {
		document.querySelector('#output').innerHTML = `${target.value} : ${target.checked}`;
	});
}

イベント発火時に全てのチェックボックスの状態が必要な場合は、イベント内でtargetsから各要素の情報を取得すれば良いと思います。

2021-12-08JavaScript,JavaScript イベント

Posted by Yousuke.U