js获取checkbox选中的值|极客笔记

js获取checkbox选中的值

在网页开发中，常常会遇到需要获取用户选择的checkbox的值的情况。本文将详细介绍如何使用JavaScript来获取checkbox选中的值。

HTML结构

首先，我们需要在HTML中创建一组checkbox，以便用户进行选择。以下是一个简单的HTML结构示例：

<!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>
    <h2>请选择您喜欢的水果：</h2>
    <input type="checkbox" name="fruit" value="apple"> 苹果
    <input type="checkbox" name="fruit" value="banana"> 香蕉
    <input type="checkbox" name="fruit" value="orange"> 橙子
    <input type="checkbox" name="fruit" value="grape"> 葡萄
    <button onclick="getSelectedFruits()">获取选中的水果</button>

    <script src="script.js"></script>
</body>
</html>

在上面的代码中，我们创建了一个包含四个checkbox的表单，并设置了一个按钮，点击该按钮将触发getSelectedFruits()函数。

JavaScript代码

接下来，我们将编写JavaScript代码来实现获取选中的checkbox的值的功能。我们可以通过querySelectorAll()方法选择所有名为fruit的checkbox，并遍历它们，判断哪些checkbox被选中。

以下是JavaScript代码示例：

function getSelectedFruits() {
    let selectedFruits = [];
    let checkboxes = document.querySelectorAll('input[name="fruit"]:checked');

    checkboxes.forEach(function(checkbox) {
        selectedFruits.push(checkbox.value);
    });

    alert('您选择的水果是：' + selectedFruits.join(', '));
}

在上面的代码中，我们定义了一个名为getSelectedFruits()的函数，该函数首先创建一个空数组selectedFruits用于存储选中的水果值。然后使用querySelectorAll()方法选择所有名为fruit且被选中的checkbox，并将它们存储在checkboxes变量中。接着使用forEach()方法遍历所有选中的checkbox，并将其值添加到selectedFruits数组中。最后，通过alert()方法弹出提示框显示用户选择的水果值。