JavaScript 核取方塊 onChange
Anika Tabassum Era
2023年1月30日
JavaScript
JavaScript Checkbox
-
在 JavaScript 中使用
onChange作為核取方塊的屬性 -
在 Checkbox 上使用
onChange作為 JavaScript 屬性 -
在 JavaScript 中將
addEventListener用於onChange
JavaScript 的 onChange 事件側重於更改元素的值。當執行特定事件時，它會被觸發並返回一些偏好。
onchange 事件在元素失去焦點後立即生效。它在單擊後立即觸發，onClick 和 onChange 之間的區別很微妙。
我們將討論 onChange 最常用的方法作為 HTML 屬性、JavaScript 屬性和事件偵聽器。
在 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 正文中返回布林輸出。
在 Checkbox 上使用 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 中將 addEventListener 用於 onChange
addEventListener 有一個 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 以繼續處理另一個函式體。
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
