JavaScript addEventListenerでチェックボックスを選択したイベントを取得する
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122
構文
1.チェックボックスすべてを取得する
let 変数名 = document.querySelectorAll(“input[type=’checkbox’]");
2.チェックボックスを選択する際にイベントを取得する
変数名.forEach(function(v) { v.addEventListener('change’,function(){処理コード})
使用例
<!DOCTYPE html> <html> <body> <input type="checkbox" value="tokyo">東京 <input type="checkbox" value="oosaka">大阪 <br> <br> <script> let cft =document.querySelectorAll("input[type='checkbox']"); console.log("forEach文で全てチェックボックスを選択した際のイベント取得"); cft.forEach(function(ele) { ele.addEventListener('change',function(){ console.log(ele.outerHTML+"が選択されました"); }); }); </script> </body> </html>
実行結果
「東京」チェックボックスを選択すると、コンソール画面に下記メッセージが出力されます。
<input type="checkbox" value="tokyo">が選択されました