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から各要素の情報を取得すれば良いと思います。