📅 最后修改于: 2023-12-03 14:41:55.291000 🧑 作者: Mango
HTML 复选框是一种允许用户同时选择多个选项的表单元素。在本文中，我们将介绍如何使用HTML和JavaScript来检查所有已选中的复选框。
HTML 复选框（checkbox）看起来像一个小的矩形框，可以有一个勾选标记来表示用户的选择。以下是HTML复选框的基本语法：
<input type="checkbox" name="checkbox1" value="value1">选项1
<input type="checkbox" name="checkbox2" value="value2">选项2
<input type="checkbox" name="checkbox3" value="value3">选项3
当用户在复选框中进行了选择，我们需要编写JavaScript代码来检查所有已选择的项。以下是一个基本的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>检查所有复选框</title>
<script>
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}
</script>
</head>
<body>
<h2>选择所有复选框</h2>
<input type="checkbox" onclick="checkAll(this)">选择所有
<br>
<br>
<input type="checkbox" name="checkbox1" value="value1">选项1
<input type="checkbox" name="checkbox2" value="value2">选项2
<input type="checkbox" name="checkbox3" value="value3">选项3
</body>
</html>
在以上代码中，我们使用了document.getElementsByTagName在整个HTML文档中获取所有的input元素，并通过循环检查每一个input元素的类型，以确定它是否为复选框。如果是复选框且选择了“选择所有”复选框，则我们将其checked属性设置为true，否则设置为false。
现在我们已经学习了如何使用HTML和JavaScript来检查所有已选择的复选框。这对于从多个选项中选择需要的信息非常有用。我们希望本教程对你有所帮助！