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)
使用例
<!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」が表示されます。