HTML 如何获取所有被选中的复选框

在本文中，我们将介绍如何使用HTML和JavaScript获取所有被选中的复选框。

阅读更多：HTML 教程

背景知识

HTML是一种标记语言，用于创建网页。复选框是一种HTML元素，允许用户选择一个或多个选项。使用JavaScript，我们可以轻松地获取所有被选中的复选框，并进行相应的处理。

获取所有被选中的复选框

要获取所有被选中的复选框，我们可以使用JavaScript来遍历HTML中的所有复选框，并检查其是否被选中。以下是一段示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取所有被选中的复选框</title>
    <script>
        function getCheckedCheckboxes() {
            var checkboxes = document.getElementsByTagName('input');
            var checkedCheckboxes = [];

            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].type === 'checkbox' && checkboxes[i].checked) {
                    checkedCheckboxes.push(checkboxes[i]);
                }
            }

            return checkedCheckboxes;
        }

        function showCheckedCheckboxes() {
            var checkedCheckboxes = getCheckedCheckboxes();
            var result = '';

            for (var i = 0; i < checkedCheckboxes.length; i++) {
                result += checkedCheckboxes[i].value + '\n';
            }

            alert(result);
        }
    </script>
</head>
<body>
    <h1>获取所有被选中的复选框</h1>
    <input type="checkbox" value="选项1">选项1<br>
    <input type="checkbox" value="选项2">选项2<br>
    <input type="checkbox" value="选项3">选项3<br>
    <input type="checkbox" value="选项4">选项4<br>
    <button onclick="showCheckedCheckboxes()">显示被选中的复选框</button>
</body>
</html>

在上述示例代码中，我们使用了两个函数。getCheckedCheckboxes函数用于获取所有被选中的复选框，并返回一个数组。showCheckedCheckboxes函数用于将所有被选中的复选框的值显示在一个弹出窗口中。

示例说明

当用户点击”显示被选中的复选框”按钮时，showCheckedCheckboxes函数将被调用。该函数首先调用getCheckedCheckboxes函数来获取所有被选中的复选框。然后，它遍历被选中的复选框数组，并将每个复选框的值添加到result字符串中。最后，它使用alert函数将result字符串显示在一个弹出窗口中。

在上述示例HTML代码中，我们创建了四个复选框，并添加了一个按钮。当用户选择一个或多个复选框，并点击按钮时，被选中的复选框的值将在一个弹出窗口中显示出来。