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

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

此外，您自己脑海中也可能有许多复选框的用途。HTML 可以将复选框添加到网页中，但要向复选框添加行为，我们必须使用 JavaScript。程序员可以根据复选框是否被选中向复选框添加不同的行为。

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

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

在本节中，我们将学习如何检查复选框是否被选中。在 JavaScript 中，我们可以使用 id、类或标签名称访问复选框元素，并将'.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 和 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>

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

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

此外，用户可以使用 jQuery 等 JavaScript 库，因此用户需要花费更少的精力来检查多个复选框。

更新于： 2023年9月6日

51K+ 浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告