如何在 JavaScript 中检查复选框是否已选中？
在本教程中，我们将学习如何在 JavaScript 中检查复选框是否已选中。checkbox 是 HTML 中的输入类型，用作选择框。属于同一组的 radio 按钮允许用户仅选择一个值。而属于同一组的复选框允许用户选择多个值。
此外，您自己也已经想到了复选框的许多用途。HTML 可以将复选框添加到网页，但要将行为添加到复选框，我们必须使用 JavaScript。程序员可以根据复选框是否被选中来为复选框添加不同的行为。
在这里，我们将学习如何检查单个和多个复选框是否被选中。
检查单个复选框是否被选中
在本节中，我们将学习如何检查复选框是否被选中。在 JavaScript 中，我们可以使用 id、class 或标签名称访问复选框元素，并将 '.checked' 应用于元素，根据复选框是否被选中返回 true 或 false。
语法
用户可以按照以下语法检查单个复选框是否被选中。
let checkbox = document.getElementById("checkbox_id");
let checkbox.checked; // 它返回布尔值
示例
在下面的示例中，我们创建了复选框。此外，我们还向复选框添加了事件侦听器。当用户更改复选框的值时，将调用事件侦听器。在事件侦听器中，我们将检查复选框是否被选中。如果复选框被选中，我们将向 div 显示一些文本，否则我们将使 div 为空。
<html> <head> <title>Check whether the Checkbox is checked or not</title> </head> <body> <h2>Check whether the Checkbox is checked or not using <i> .checked attribute </i></h2> <h4>Check the below checkbox to see the text div</h4> <input type = "checkbox" id = "checkbox"> <div id = "text"> </div> <script> let checkbox = document.getElementById("checkbox"); checkbox.addEventListener( "change", () => { if ( checkbox.checked ) { text.innerHTML = " Check box is checked. "; } else { text.innerHTML = ""; } }); </script> </body> </html>
在上面的输出中，用户可以看到，当他们选中复选框时，会显示一条消息"复选框已选中"。当他们取消选中复选框时，则不显示任何内容。
检查是否选中了多个复选框
将行为添加到单个复选框很简单。在许多网站上，您已经看到，当您看到接受条款和条件的弹出窗口时，它有多个复选框，而当您选中所有复选框时，只会启用接受按钮。
在这里，我们将做同样的事情。我们将创建多个复选框，并检查所有复选框是否被选中，并在此基础上启用按钮。
语法
访问所有复选框和按钮
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 创建了访问按钮和复选框。
我们在所有复选框中添加了一个事件监听器。当任何复选框值发生变化时，它将检查所有复选框是否被选中。如果所有复选框都被选中，则事件监听器将启用该按钮。否则，按钮将保持禁用状态。
<html> <head> </head> <body> <h2>Check whether the Checkbox is checked or not</h2> <h4>Check the below all checkboxes to enable the submit button.</h4> <input type = "checkbox" name = "checkbox"> <input type = "checkbox" name = "checkbox"> <input type = "checkbox" name = "checkbox"> <button id = "btn" disabled> enable button</button> <script> // access elements by id and name let checkbox = document.getElementsByName("checkbox"); let button = document.getElementById("btn"); // Initialilly checkbox is disabled for (let i = 0; i < checkbox.length; i++) { // iterate through every checkbox and add event listner to every checkbox. checkbox[i].addEventListener( "change", () => { button.disabled = false; // if all checkbox values is checked then button remains enable, otherwise control goes to the if condition and disables button. for (let i = 0; i < checkbox.length; i++) { if ( checkbox[i].checked == false ) button.disabled = true; } }); } </script> </body> </html>
在上面的输出中，用户可以看到，当他们选中所有复选框时，按钮将启用，否则按钮将保持禁用状态。
在本教程中，我们学习了如何检查是否选中了单个或多个复选框。我们根据复选框选择值向网页添加了不同的行为。
此外，用户可以使用 JavaScript 库（例如 jQuery），因此用户需要花费更少的精力来选中多个复选框。
