如何在JavaScript中检查复选框是否被选中？

在本教程中，我们将学习如何在 JavaScript中检查复选框是否被选中。复选框是HTML中的输入类型，它作为选择框起作用。属于同一组的 单选框 允许用户只选择一个值。而属于同一组的复选框允许用户选择多个值。

此外，您还可以根据自己的需要在您的网页中使用复选框。HTML可以向网页添加复选框，但是要为复选框添加行为，我们必须使用JavaScript。程序员可以根据复选框是否被选中来添加不同的行为。

在这里，我们将学习如何检查单个和多个复选框是否被选中。

检查单个复选框是否被选中

在本部分，我们将学习如何检查复选框是否被选中。在JavaScript中，我们可以使用id、class或标签名称来访问复选框元素，并应用 **‘ .checked ‘ ** 到该元素上，该元素将根据复选框是否被选中返回true或false。

语法

用户可以按照以下语法来检查单个复选框是否被选中。

let checkbox = document.getElementById("checkbox_id");
let checkbox.checked; // it returns Boolean value

示例

在下面的示例中，我们创建了一个复选框。同时，我们添加了一个事件监听器到复选框上。当用户改变复选框的值时，事件监听器将被调用。在事件监听器中，我们将检查复选框是否被选中。如果复选框被选中，我们将在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和名称访问按钮和复选框。

我们在所有复选框中添加了一个事件监听器。当任何复选框的值发生变化时，它会检查所有复选框是否都被选中。如果所有复选框都被选中，事件监听器会启用按钮。否则，按钮将保持禁用状态。

<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>

在上面的输出中，用户可以看到当他们勾选所有复选框时，按钮将被启用，否则按钮保持禁用状态。

在本教程中，我们学习了如何检查单个或多个复选框是否被选中。我们根据复选框的选择值为网页添加了不同的行为。

此外，用户还可以使用诸如jQuery等JavaScript库，这样用户就需要更少的工作来检查多个复选框。