JavaScript 复选框 onChange
Anika Tabassum Era
2023年1月30日
-
在 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 以继续处理另一个函数体。
