JavaScript 复选框 onChange

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 复选框 onChange

作者：迹忆客最近更新：2024/03/20 浏览次数：

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>