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