如何在一个数组中使用jQuery获得所有选中的复选框

下面我来为你讲解如何在一个数组中使用jQuery获得所有选中的复选框。本文将分为以下几个步骤来讲解：

1. HTML结构
2. jQuery选择器
3. 获取选中的复选框
4. 添加到数组中
5. 示例说明

1. HTML结构

为了演示如何获取选中的复选框，首先我们需要在HTML中创建一组复选框：

<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="orange"> Orange

这是一个包含3个复选框的简单示例，每个复选框都有相同的名称 fruit，不同的值 apple、banana、orange。

2. jQuery选择器

接下来，我们需要使用jQuery选择器来获取这组复选框。使用jQuery选择器 $("input[name='fruit']")，可以选择所有名称为 fruit 的 input 元素。代码如下：

var checkboxes = $("input[name='fruit']");

这将选择所有名称为 fruit 的 input 元素，并将它们存储在变量 checkboxes 中。

3. 获取选中的复选框

现在，我们需要获取所有选中的复选框。我们可以使用jQuery的 :checked 选择器来筛选选中的元素。代码如下：

var checkedBoxes = checkboxes.filter(":checked");

这将筛选出所有选中的复选框，并将它们存储在变量 checkedBoxes 中。

4. 添加到数组中

最后，我们需要将选中的复选框添加到数组中。可以使用jQuery的 map 方法和 get 方法将它们转换为数组。代码如下：

var selectedFruits = checkedBoxes.map(function() {
  return this.value;
}).get();

这将创建一个包含所有选中的复选框值的数组，并将它们存储在变量 selectedFruits 中。

5. 示例说明

下面是两个使用示例：

示例1：当复选框选中时，在控制台打印选中的值。

$("input[name='fruit']").change(function() {
  var checkedBoxes = $(this).filter(":checked");
  var selectedFruits = checkedBoxes.map(function() {
    return this.value;
  }).get();
  console.log(selectedFruits);
});

示例2：当复选框选中时，在页面上显示选中的值。

$("input[name='fruit']").change(function() {
  var checkedBoxes = $(this).filter(":checked");
  var selectedFruits = checkedBoxes.map(function() {
    return this.value;
  }).get();
  $("#selected-fruits").text(selectedFruits.join(", "));
});

在这个示例中，我们使用 join 方法将选中的水果值连接起来，并将它们显示在 #selected-fruits 元素中。

希望这个攻略可以帮助你了解如何在一个数组中使用jQuery获得所有选中的复选框！