js 怎么读取勾选的值

在JavaScript中读取勾选的值，可以使用以下方法：使用document.querySelectorAll获取所有被勾选的复选框、遍历这些复选框并提取其值。其中，document.querySelectorAll是一个非常强大的工具，可以用来选择文档中的所有指定元素。在获取到这些元素后，你可以使用forEach方法来遍历它们，并将它们的值存储到一个数组中。

要深入了解如何实现这一操作，我们将从以下几个方面进行详细说明：如何使用document.querySelectorAll选择复选框、如何遍历选中的复选框并提取其值、如何处理这些值以满足不同的应用需求。

一、使用`document.querySelectorAll`选择复选框

在Web开发中，复选框（checkbox）是一个非常常见的表单元素。要读取这些复选框的值，首先需要选择它们。document.querySelectorAll方法可以帮助我们轻松实现这一点。这个方法接受一个CSS选择器字符串，并返回一个匹配元素的NodeList。

let checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');

在上面的代码中，我们使用input[type="checkbox"]:checked选择器来获取所有被勾选的复选框。input[type="checkbox"]选择所有类型为复选框的输入元素，:checked伪类选择器则确保只选择那些被勾选的复选框。

二、遍历选中的复选框并提取其值

一旦选择了所有被勾选的复选框，我们可以使用forEach方法来遍历这些复选框，并提取它们的值。通常，我们会将这些值存储到一个数组中，以便稍后使用。

let checkedValues = [];
checkboxes.forEach(checkbox => {
    checkedValues.push(checkbox.value);
});

在这段代码中，我们首先声明一个空数组checkedValues，然后使用forEach方法遍历每一个被勾选的复选框，并将它们的值添加到checkedValues数组中。

三、处理提取的值

提取到复选框的值后，可以根据需要对这些值进行处理。比如，可以将这些值显示在用户界面上、发送到服务器、或者用于进一步的计算。

1. 显示在用户界面上

可以将这些值显示在一个HTML元素中，例如一个<div>或者<p>标签内。

let displayElement = document.getElementById('display');
displayElement.innerText = checkedValues.join(', ');

2. 发送到服务器

使用AJAX请求将这些值发送到服务器。

let xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ checkedValues }));

3. 用于进一步的计算

可以使用这些值进行进一步的计算，例如统计被勾选的复选框数量。

let count = checkedValues.length;
console.log(`总共有${count}个复选框被勾选`);

四、示例代码

为了更好地理解以上内容，以下是一个完整的示例代码，它展示了如何读取被勾选的复选框的值，并将这些值显示在用户界面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkbox Example</title>
</head>
<body>
    <form id="checkboxForm">
        <label><input type="checkbox" value="Option 1"> Option 1</label><br>
        <label><input type="checkbox" value="Option 2"> Option 2</label><br>
        <label><input type="checkbox" value="Option 3"> Option 3</label><br>
        <button type="button" onclick="getCheckedValues()">Submit</button>
    </form>
    <div id="display"></div>
    <script>
        function getCheckedValues() {
            let checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
            let checkedValues = [];
            checkboxes.forEach(checkbox => {
                checkedValues.push(checkbox.value);
            });
            let displayElement = document.getElementById('display');
            displayElement.innerText = checkedValues.join(', ');
        }
    </script>
</body>
</html>

通过上面的示例代码，你可以看到如何使用JavaScript读取被勾选的复选框的值，并将这些值显示在用户界面上。希望这篇文章能帮助你更好地理解和实现这一功能。