在 JavaScript 中验证复选框

在本文中,我们将使用输入元素的 checked 属性介绍 JavaScript 中的复选框验证。

使用 checked 属性验证 JavaScript 中的复选框

JavaScript 中的 input 元素用于接收用户的输入。这也可以在表单中使用。

它为我们提供了一个 checked 属性来验证 JavaScript 中的复选框。如果用户选中复选框,则 checked 属性将返回 true;否则,它将返回 false

下面我们有一个 HTML 文档。我们在 body 元素中有一个标签和一个按钮。

使用 label 元素,我们可以为复选框提供标签。input 元素包裹在 label 元素周围。

为了使这个输入成为一个复选框,我们必须将它的类型设置为 checkbox,并且我们还必须为输入提供一个 ID 为 checkbox 的输入,以便在 JavaScript 中访问这个元素。

<!DOCTYPE html>
<html>
  <head>
    <body>
        <label for="Select Checkbox">
            <input type="checkbox" id="checkbox"> Accept
        </label>

        <button id="submit">Submit</button>

        <script>
            const checkbox = document.getElementById('checkbox');
            const btn = document.getElementById('submit');

            btn.onclick = () => {
                if(!checkbox.checked)
                    console.log("Checkbox selected: ", checkbox.checked);
                else
                    console.log("Checkbox selected: ", checkbox.checked);
            };
        </script>
    </body>
  
</html>

输出:

在 JavaScript 中验证复选框

在这里,我们首先存储了 checkbox 元素的引用,我们使用 DOM API 的 getElementById() 方法在 HTML 中定义了该元素。同样,我们也为提交按钮执行此操作。

现在我们已经将复选框和提交按钮存储在 checkbox 和 btn 变量中,我们使用它们来执行验证。在这里,我们在 btn 上设置了一个 onclick() 元素,一经按下,它将执行一个函数。

在这个函数中,我们使用了一个条件语句并检查 checkbox.checked 是否为真。

请注意,我们使用了感叹号!在 if 块内。这意味着如果用户不选中复选框,checkbox.checked 将返回 false,而 !false 将变为 true

由于用户没有选中复选框,我们在 if 块内输入,然后打印 Checkbox selected: false

否则,如果用户单击复选框,我们将进入 else 块,并且打印在控制台上的消息将是 Checkbox selected: true