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>
上面的代码创建了一个包含复选框的表单。
现在，你需要将事件附加到复选框。每次更改时它都会检查其状况，如果未选中则显示消息。
可以将两个事件附加到复选框并在复选框值更改时执行。它们是 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');
}
}
当复选框未选中时，代码会给我们一个输出，说明用户必须具备流利的英语才能申请该工作。借助 onclick 事件和 JavaScript 函数，你可以轻松确定复选框是否被选中。
此外，它还允许你在 if-else 语句中添加任何条件。在本文中，你学习了如何使用 JavaScript 通过其 onclick 事件和调用函数 checkfluency 来管理 HTML 复选框。