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