JavaScript 复选框 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
以继续处理另一个函数体。
相关文章
Do you understand JavaScript closures?
发布时间:2025/02/21 浏览次数:108 分类:JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间:2025/02/21 浏览次数:178 分类:JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间:2025/02/21 浏览次数:150 分类:JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间:2024/03/24 浏览次数:102 分类:JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。