JavaScript addEventListenerメソッドでチェックボックスにチェックされたらvalue値を取得する

2022年10月28日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

書式
1.チェックボックス要素の取得
const 変数名 = document.getElementById(セレクターid名);

2.チェックボックスのonclickイベントリスナを登録
変数名.addEventListener(“onclick",function(e){処理コード}
引数1はclickのイベントです。functionにクリックされた時に処理コードを実行します。

3.チェックボックスのチェック判定
if(変数名.checked)

使用例

<!DOCTYPE html>
<html>
<body>
<p>選択の項目の値: <span id="show"></span></p>
<label><input type="checkbox" id="city" value="tokyo" />東京</label>

<script>
  
  const city = document.getElementById("city");
  const result = document.getElementById("show");
  // addEventListenerメソッド clickイベント
  city.addEventListener("click", function(e) {
         //　チェックされる
         if(city.checked) {
            result.textContent = city.value;
         } else { //チェックされない
             result.textContent = "";
         }
  });
</script>

</body>
</html>

結果
チェックボックス「東京」にチェックを入れると、「選択の項目の値: tokyo」が表示されます。

JavaScript

Posted by arkgame

関連記事: