JavaScript querySelectorAllを使用して複数チェックボックス要素を取得する

2023年1月10日

環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122

構文
1.チェックボックスすべてを取得する
let 変数名 = document.querySelectorAll(“input[type=’checkbox’]");
2.チェックボックスを選択する際にイベントを取得する
変数名「インデックス」.addEventListener('change’,function(){処理コード})

使用例

<!DOCTYPE html>
<html>
<body>
<input type="checkbox" value="tokyo">東京
<input type="checkbox" value="oosaka">大阪
<br>
<br>

<script>
console.log("チェックボックス全てを取得");
let sel =document.querySelectorAll("input[type='checkbox']");

console.log("全てチェックボックスを選択した際のイベント取得");
for (let i = 0; i < sel.length; i++) {
  sel[i].addEventListener('change',function(){
    console.log(sel[i].outerHTML+"が選択されました");
  });
}

</script>

</body>
</html>

実行結果
「東京」チェックボックスを選択すると、コンソール画面に下記メッセージが出力されます。
<input type="checkbox" value="tokyo">が選択されました

JavaScript

Posted by arkgame

関連記事: