JavaScript チェックボックス onChange
-
JavaScript のチェックボックスの属性として
onChangeを使用する -
チェックボックスの
onChangeを JavaScript プロパティとして使用する -
JavaScript の
onChangeにaddEventListenerを使用する
JavaScript の onChange イベントは、要素の値の変更に焦点を当てています。特定のイベントが実行されると、そのイベントがトリガーされ、優先順位の高いものが返されます。
onchange イベントは、要素がフォーカスを失った直後に機能します。クリック直後に起動し、onClick と onChange の違いは微妙です。
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>
出力：
キーワード 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>
出力：
コーディングの便宜のために function(value) と入力します。引数として value を追加しなくても、同じ結果になります。
JavaScript の onChange に addEventListener を使用する
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 が呼び出されて他の関数本体を続行します。
