JavaScript 中的核取方塊 Onclick 事件

Tahseen Tauseef 2023年1月30日 2022年5月10日
  1. JavaScript 中的 onclick 事件
  2. 使用 JavaScript 使用 onclick 事件管理 HTML 核取方塊
JavaScript 中的核取方塊 Onclick 事件

本文將討論如何呼叫 JavaScript 函式,該函式將幫助我們在 HTML 核取方塊被點選時進行管理,並教你如何處理 JavaScript 中的 onclick 事件。

JavaScript 中的 onclick 事件

onclick 事件允許你在單擊元素時執行一個函式。當使用者單擊按鈕時,他們會在瀏覽器中看到一條警報,顯示該按鈕已被單擊。

onclick 事件也可以新增到任何元素。通過本教程,你將學習如何使用 JavaScript 使用 onclick 事件來管理核取方塊,這將讓你知道核取方塊是否已被選中。

下面是 onclick 按鈕的示例。當使用者單擊按鈕時,他們會在瀏覽器中看到一條警報,顯示 Button was clicked!

<button onclick="myFunction()">Click me</button>

<script>
  function myFunction() {
    alert('Button was clicked!');
  }
</script>

HTML 核取方塊輸入元素允許我們選擇單個值以在表單中提交。

使用 JavaScript 使用 onclick 事件管理 HTML 核取方塊

要開始使用核取方塊,你需要建立一個包含核取方塊的表單。在此示例中,你將建立一個輸入使用者名稱的表單,其中包含一個核取方塊,如果使用者認為自己的英語足夠流利,則應單擊該核取方塊。

如果不是這種情況,則會出現提示,告訴使用者他們必須能說流利的英語才能申請該職位。

程式碼 - HTML:

<form action="">
  <label for="name">Name:</label>
  <input type="text" name="name"><br>
  <label for="language">Do you speak English fluently?</label>
<input type="checkbox" id="fluency" checked />
</form>

上面的程式碼建立了一個包含核取方塊的表單。

為 onlick 建立 HTML 表單

現在,你需要將事件附加到核取方塊。每次更改時它都會檢查其狀況,如果未選中則顯示訊息。

可以將兩個事件附加到核取方塊並在核取方塊值更改時執行。它們是 onclickonchange 事件。

onchange 函式存在問題,在更新檢查狀態之前不會呼叫它。由於 Internet Explorer 瀏覽器在核取方塊失去焦點之前不會觸發 onChange 事件,因此它將輸出與 Google Chrome 和其他瀏覽器不同的結果。

所以你應該堅持 onclick 事件來避免這一切。

<input type="checkbox" onclick="checkFluency()" id="fluency" checked />

在這裡,你將新增一個 onclick 事件。一旦它被點選,這將呼叫一個名為 checkFluency() 的函式。

程式碼 - JavaScript:

function checkFluency()
{
  var checkbox = document.getElementById('fluency');
  if (checkbox.checked != true)
  {
    alert("you need to be fluent in English to apply for the job");
  }
}

通過 JavaScript 使用 onlick 事件

當核取方塊未選中時,程式碼會給我們一個輸出,說明使用者必須具備流利的英語才能申請該工作。藉助 onclick 事件和 JavaScript 函式,你可以輕鬆確定核取方塊是否被選中。

此外,它還允許你在 if-else 語句中新增任何條件。在本文中,你學習瞭如何使用 JavaScript 通過其 onclick 事件和呼叫函式 checkfluency 來管理 HTML 核取方塊。

相關文章 - JavaScript Event