JavaScript 中的复选框 Onclick 事件

JavaScript 9月前 208

本文将讨论如何调用 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>

上面的代码创建了一个包含复选框的表单。

JavaScript 中的复选框 Onclick 事件

现在，你需要将事件附加到复选框。每次更改时它都会检查其状况，如果未选中则显示消息。

可以将两个事件附加到复选框并在复选框值更改时执行。它们是 onclick 和 onchange 事件。

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 中的复选框 Onclick 事件