JavaScript 如何获取所有选中的复选框的值

在本文中，我们将讨论如何通过 HTML 和 JavaScript 获取所选复选框的所有选中值。

复选框是一种选择框，允许用户通过选择或取消选择来以二进制方式选择真或假。当复选框被选中时，它表示用户已选择该值，当复选框未被选中时表示假，表示用户没有选择该值。复选框与单选按钮和下拉菜单非常不同，因为在复选框中我们可以选择多个选项。

语法：

<input type="checkbox" id="" value="on" name="">

方法： 首先，我们将创建一些复选框，并给它们赋予一些值，现在对于javascript部分，我们将创建一个函数，检查是否选择了任何复选框，如果选择了，我们将在屏幕上打印出来，这将适用于所有的复选框，因为我们将使用循环遍历所有复选框，使用其长度属性，

示例： 在这个示例中，我们将创建四个复选框，但用户只能在其中选择两个复选框，然后我们将获取已选复选框的值。

HTML

<!DOCTYPE html>
<html lang="en">
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <input type="checkbox"
           name="laptop"
           value="HP">HP laptop<br>
    <input type="checkbox"
           name="laptop"
           value="DELL">DELL laptop<br>
    <input type="checkbox"
           name="laptop"
           value="MAC">MAC laptop<br>
    <input type="checkbox"
           name="laptop"
           value="ASUS">ASUS laptop<br>
    <button onclick="getValue()">
        Get Value
    </button>
    <script>
        function getValue() {
            var checkboxes =
                document.getElementsByName('laptop');
            var result = "";
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    result += checkboxes[i].value
                        + " " + " Laptop, ";
                }
            }
            document.write("<p> You have selected : "
                + result + "</p>");
        }
    </script>
</body>
</html>

输出：

JavaScript 如何获取所有选中的复选框的值