JavaScript 复选框 onChange

Anika Tabassum Era 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 onChange 作为复选框的属性
  2. 在 Checkbox 上使用 onChange 作为 JavaScript 属性
  3. 在 JavaScript 中将 addEventListener 用于 onChange
JavaScript 复选框 onChange

JavaScript 的 onChange 事件侧重于更改元素的值。当执行特定事件时,它会被触发并返回一些偏好。

onchange 事件在元素失去焦点后立即生效。它在单击后立即触发,onClickonChange 之间的区别很微妙。

我们将讨论 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>

输出:

onchange_attribute

关键字 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>

输出:

onchange_property

为了编码方便,键入 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_onchange

声明对象,并调用 addEventListener 以继续处理另一个函数体。

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

相关文章 - JavaScript Checkbox