JavaScript チェックボックス onChange

Anika Tabassum Era 2023年1月30日
  1. JavaScript のチェックボックスの属性として onChange を使用する
  2. チェックボックスの onChange を JavaScript プロパティとして使用する
  3. JavaScript の onChangeaddEventListener を使用する
JavaScript チェックボックス onChange

JavaScript の onChange イベントは、要素の値の変更に焦点を当てています。特定のイベントが実行されると、そのイベントがトリガーされ、優先順位の高いものが返されます。

onchange イベントは、要素がフォーカスを失った直後に機能します。クリック直後に起動し、onClickonChange の違いは微妙です。

HTML 属性、JavaScript プロパティ、およびイベントリスナーとして最もよく使用される onChange のメソッドについて説明します。

JavaScript のチェックボックスの属性として onChange を使用する

onchange 属性は、システムをトリガーするコード本体を持つ JavaScript 関数を参照します。ここのインスタンスにはチェックボックスがあり、チェックすると、変更を表す関数が実行されます。

コードスニペット:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <label>
  	<input type="checkbox" onchange="Check(this)" /> CHECK as onchange attribute
  </label>
  <p id="verdict"></p>
  <script>

    function Check(value) {
      document.getElementById('verdict').innerHTML = value.checked;
    };
  </script>
</body>
</html>

出力:

onchange_attribute

キーワード this はグローバルオブジェクトを参照し、onChange 属性は Check 関数を取得してトリガーします。value.checked は、トグルステータスに基づいて HTML 本文に boolean 出力を返します。

チェックボックスの onChange を JavaScript プロパティとして使用する

この場合、特定の id = "check"を参照するオブジェクトを宣言します。その後、object.onchange プロパティを呼び出して、トグルで実行される関数を初期化します。

コードスニペット:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <label>
  	<input type="checkbox" id="check" /> CHECK for oncheck property
  </label>
  <p id="verdict"></p>
  <script>
     var y = document.getElementById('check');
    
      y.onchange = function(value){
      document.getElementById('verdict').innerHTML = y.checked;
    };
  </script>
</body>
</html>

出力:

onchange_property

コーディングの便宜のために function(value) と入力します。引数として value を追加しなくても、同じ結果になります。

JavaScript の onChangeaddEventListener を使用する

addEventListener には、フォーカスが変更されるまで発生しない change イベントがあります。メイン操作はイベントリスナーを呼び出し、change イベントをアクティブにします。他の機能コードは、フォーカスが失われたときに発生します。

コードスニペット:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
</head>
<body>
  <label>
  	<input type="checkbox" id="check" /> CHECK for addEventListener
  </label>
  <p id="verdict"></p>
  <script>
     var y = document.getElementById('check');
    
      y.addEventListener('change', function(){
      document.getElementById('verdict').innerHTML = y.checked;
    });
  </script>
</body>
</html>

出力:

addeventlistener_onchange

オブジェクトが宣言され、addEventListener が呼び出されて他の関数本体を続行します。

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

関連記事 - JavaScript Checkbox