jQuery 获取选中的复选框值数组

在前端开发中，经常需要对复选框（checkbox）进行操作，由于一般情况下只有选中的复选框的值是有用的，因此获取选中的复选框的值数组是一项常见的需求。

下面介绍一种利用 jQuery 获取选中的复选框值数组的方法。

HTML 代码

首先，我们需要一些 HTML 代码。以下是一个包含多个复选框的表单。

<form id="my-form">
  <div>
    <input type="checkbox" name="fruit" value="apple" id="apple">
    <label for="apple">苹果</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="orange" id="orange">
    <label for="orange">橙子</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="banana" id="banana">
    <label for="banana">香蕉</label>
  </div>
  <button type="submit">提交</button>
</form>

jQuery 代码

接下来，我们使用 jQuery 来获取选中的复选框的值数组。

$("#my-form").submit(function(event) {
  event.preventDefault();
  var selectedFruits = [];
  $('input[name="fruit"]:checked').each(function() {
    selectedFruits.push($(this).val());
  });
  console.log(selectedFruits);
});

上面代码中，我们在表单的提交事件上绑定了一个处理函数。在处理函数中，我们首先使用 event.preventDefault() 方法阻止表单的默认提交行为，然后定义一个空数组 selectedFruits，用于存储选中的复选框的值。接着，我们使用 jQuery 选择器 $('input[name="fruit"]:checked') 获取所有选中的名为 fruit 的复选框，并使用 each() 方法遍历它们。在遍历的过程中，我们使用 $(this).val() 方法获取当前复选框的值，并将它推入到 selectedFruits 数组中。最后，我们使用 console.log() 方法输出选中的复选框的值数组。

Markdown 代码

以下是返回的 Markdown 代码片段：

## jQuery 获取选中的复选框值数组

在前端开发中，经常需要对复选框（checkbox）进行操作，由于一般情况下只有选中的复选框的值是有用的，因此获取选中的复选框的值数组是一项常见的需求。

### HTML 代码

首先，我们需要一些 HTML 代码。以下是一个包含多个复选框的表单。

```html
<form id="my-form">
  <div>
    <input type="checkbox" name="fruit" value="apple" id="apple">
    <label for="apple">苹果</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="orange" id="orange">
    <label for="orange">橙子</label>
  </div>
  <div>
    <input type="checkbox" name="fruit" value="banana" id="banana">
    <label for="banana">香蕉</label>
  </div>
  <button type="submit">提交</button>
</form>
```

### jQuery 代码

接下来，我们使用 jQuery 来获取选中的复选框的值数组。

```javascript
$("#my-form").submit(function(event) {
  event.preventDefault();
  var selectedFruits = [];
  $('input[name="fruit"]:checked').each(function() {
    selectedFruits.push($(this).val());
  });
  console.log(selectedFruits);
});
```

上面代码中，我们在表单的提交事件上绑定了一个处理函数。在处理函数中，我们首先使用 `event.preventDefault()` 方法阻止表单的默认提交行为，然后定义一个空数组 `selectedFruits`，用于存储选中的复选框的值。接着，我们使用 jQuery 选择器 `$('input[name="fruit"]:checked')` 获取所有选中的名为 `fruit` 的复选框，并使用 `each()` 方法遍历它们。在遍历的过程中，我们使用 `$(this).val()` 方法获取当前复选框的值，并将它推入到 `selectedFruits` 数组中。最后，我们使用 `console.log()` 方法输出选中的复选框的值数组。