在 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>
输出:
在这里,我们首先存储了 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
。