JavaScript addEventListenerでチェックボックスの背景色を変えるサンプル

環境
Windows 10 Home 64bit
Google Chrome 106.0.5249.119

構文
1.チェックボックス要素の取得
const 変数名 = document.getElementById(セレクター名);
2.イベントリスナの追加
変数名.addEventListener(“click",function(e){処理コード
3.チェックボックスのチェック判定
if(変数名.checked)

使用例

<!DOCTYPE html>
<html>
<body>
<style>
  /*背景css*/
  #cft {
    width: 120px;
    height: 50px;
    background: green;
  }
</style>
<div id="cft">
  <label><input type="checkbox" id="city"/>東京</label>
</div>

<script>
  //チェックボックス要素「city」の取得
  const city = document.getElementById("city");
  // div要素「cft」の取得
  const cft = document.getElementById("cft");
  
  //イベントリスナの追加
  city.addEventListener("click",function(e){
     //チェックされたら
       if(city.checked) {
         cft.style.background = "yellow";
       } else {　//チェックされない
        cft.style.background ="skyblue";
       }
  });
</script>
</body>
</html>

結果
初期背景色がgreenです。チェックボックスを入れたら「yellow」が表示されます。
チェックボックスを外したら背景色が「skyblue」で表示されます。

JavaScript

Posted by arkgame