如何在 JavaScript 中检查复选框是否已选中?
front end technologyjavascriptweb development更新于 2024/5/20 16:32:00
在本教程中，我们将学习如何在 JavaScript 中检查复选框是否已选中。checkbox 是 HTML 中的输入类型，用作选择框。属于同一组的 radio 按钮允许用户仅选择一个值。而属于同一组的复选框允许用户选择多个值。
此外，您自己也已经想到了复选框的许多用途。HTML 可以将复选框添加到网页，但要将行为添加到复选框，我们必须使用 JavaScript。程序员可以根据复选框是否被选中来为复选框添加不同的行为。
在这里，我们将学习如何检查单个和多个复选框是否被选中。
检查单个复选框是否被选中
在本节中，我们将学习如何检查复选框是否被选中。在 JavaScript 中，我们可以使用 id、class 或标签名称访问复选框元素，并将 '.checked' 应用于元素，根据复选框是否被选中返回 true 或 false。
语法
用户可以按照以下语法检查单个复选框是否被选中。
let checkbox = document.getElementById("checkbox_id");
let checkbox.checked; // 它返回布尔值
示例
在下面的示例中，我们创建了复选框。此外，我们还向复选框添加了事件侦听器。当用户更改复选框的值时，将调用事件侦听器。在事件侦听器中，我们将检查复选框是否被选中。如果复选框被选中，我们将向 div 显示一些文本，否则我们将使 div 为空。
Check whether the Checkbox is checked or not using .checked attribute
Check the below checkbox to see the text div
在上面的输出中，用户可以看到，当他们选中复选框时，会显示一条消息"复选框已选中"。当他们取消选中复选框时，则不显示任何内容。
检查是否选中了多个复选框
将行为添加到单个复选框很简单。在许多网站上，您已经看到，当您看到接受条款和条件的弹出窗口时，它有多个复选框，而当您选中所有复选框时，只会启用接受按钮。
在这里，我们将做同样的事情。我们将创建多个复选框，并检查所有复选框是否被选中，并在此基础上启用按钮。
语法
访问所有复选框和按钮
let checkbox = document.getElementsByName( "checkbox" );
let button = document.getElementById( "btn" );
为每个复选框添加事件监听器。
for ( let i = 0; i < checkbox.length; i++ ) {
checkbox[i].addEventListener( "change", () => {
});
}
在事件监听器中，检查所有复选框是否被选中。
button.disabled = false;
for ( let i = 0; i < checkbox.length; i++ ) {
if ( checkbox[i].checked == false )
// if any single checkbox is unchecked, disable the button.
button.disabled = true;
}
示例
在下面的示例中，我们创建了三个具有相同名称的复选框，这意味着它们都属于同一组。此外，我们在 HTML 中创建了按钮，并在 JavaScript 中使用 id 和 name 创建了访问按钮和复选框。
我们在所有复选框中添加了一个事件监听器。当任何复选框值发生变化时，它将检查所有复选框是否被选中。如果所有复选框都被选中，则事件监听器将启用该按钮。否则，按钮将保持禁用状态。
Check whether the Checkbox is checked or not
Check the below all checkboxes to enable the submit button.
在上面的输出中，用户可以看到，当他们选中所有复选框时，按钮将启用，否则按钮将保持禁用状态。
在本教程中，我们学习了如何检查是否选中了单个或多个复选框。我们根据复选框选择值向网页添加了不同的行为。
此外，用户可以使用 JavaScript 库(例如 jQuery)，因此用户需要花费更少的精力来选中多个复选框。
相关文章
如何在 JavaScript 中将字符串数组转换为数字数组?
Lodash 库中 .extend() / .assign() 和 .merge() 之间的区别。
如何在 JavaScript 中获取星期几?
使用 JavaScript RegExp 查找换页符。
如何在 JavaScript 中检查某个值是否为数字?
如何检查 JavaScript 日期是否有效?
为什么在 JavaScript 数组迭代中使用"for…in"循环是个坏主意?
JavaScript 中 Number 可以达到的最大整数值是多少，而不会丢失精度?
什么是 JavaScript 中的 Undefined X1
在 JavaScript 中创建真正的私有方法有什么缺点?
打印
下一节 ❯❮ 上一节