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