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

環境
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)

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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