jQuery获取选中的checkbox的数组

介绍

在Web开发中，经常会遇到需要获取用户选择的checkbox的情况。jQuery是一种流行的JavaScript库，可以简化操作DOM元素的过程。本文将介绍如何利用jQuery获取选中的checkbox并将其存储在数组中。

实现步骤

1. HTML结构

首先，我们需要创建一组checkbox并将它们添加到HTML页面中。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>获取选中checkbox的数组</title>
    <script src="
</head>
<body>
    <h2>选择您喜欢的水果:</h2>
    <input type="checkbox" name="fruit" value="apple">苹果<br>
    <input type="checkbox" name="fruit" value="banana">香蕉<br>
    <input type="checkbox" name="fruit" value="orange">橙子<br>
    <input type="checkbox" name="fruit" value="grape">葡萄<br>
    <button id="submitBtn">提交</button>
</body>
</html>

2. jQuery代码

接下来，我们将使用jQuery来获取选中的checkbox并将其存储在一个数组中。请参考以下代码：

$(document).ready(function() {
  $("#submitBtn").click(function() {
    var selectedFruits = [];
    $("input[name='fruit']:checked").each(function() {
      selectedFruits.push($(this).val());
    });
    console.log(selectedFruits);
  });
});

在这段代码中，我们使用了jQuery选择器$("input[name='fruit']:checked")来选择所有选中的名为"fruit"的checkbox。然后，通过.each()方法遍历选中的checkbox，并使用.val()方法获取每个选中的checkbox的值，并将其添加到数组selectedFruits中。

最后，我们使用console.log()输出数组selectedFruits，可以在浏览器的开发者工具中查看结果。

3. 运行结果

当我们选中一些水果的checkbox，并点击"提交"按钮后，我们可以在浏览器的开发者工具中看到控制台输出的选中的水果的数组。

总结

通过使用jQuery，我们可以轻松地获取选中的checkbox并将其存储在数组中。本文提供了一个简单的示例，并解释了每个步骤的实现细节。

希望本文能够帮助您理解如何使用jQuery获取选中checkbox的数组，并在您的Web开发项目中提供一些指导。

甘特图

gantt
    title jQuery获取选中的checkbox的数组

    section 准备阶段
    创建HTML结构: done, 2022-09-01, 3d
    编写jQuery代码: done, 2022-09-04, 2d

    section 实施阶段
    运行代码: done, 2022-09-06, 1d

    section 结束阶段
    检查结果: done, 2022-09-07, 1d
    完善文档: done, 2022-09-08, 2d

关系图

erDiagram
    checkbox --|> HTML
    checkbox --|> jQuery
    checkbox --|> 数组
    jQuery --|> 数组

以上是关于如何使用jQuery获取选中checkbox的数组的科普文章。希望能对你有所帮助！