博客

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

  • Post category:jquery

让我来详细讲解一下“如何在一个数组中使用jQuery获得所有选中的复选框”。

1. 获取所有选中的复选框

在jQuery中，可以使用 :checked 选择器来获取所有选中的复选框。具体代码如下：

var checkedBoxes = $('input[type="checkbox"]:checked');

这一行代码中， $('input[type="checkbox"]:checked') 使用选择器选中了所有已经勾选的复选框。这些复选框将被存储在 checkedBoxes 变量中。

2. 把选中的复选框存储到一个数组中

完成上一步之后，我们已经获取了所有选中的复选框。现在，我们需要把它们存储到一个数组中。这可以通过jQuery的 map() 方法来完成，如下所示：

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

在上面的代码中，我们使用了 map() 方法来遍历每个选中的复选框。在每次遍历中， this.value 获取了当前复选框的值，并将其作为一个元素存储到新数组中。最后，我们使用 get() 方法获得这个新的数组。

示例

下面是一个简单的示例，在这个示例中，我们有一个 HTML 表格，其中包含了多个复选框。

<table>
  <tr>
    <td><input type="checkbox" value="1">选项 1</td>
    <td><input type="checkbox" value="2">选项 2</td>
    <td><input type="checkbox" value="3">选项 3</td>
  </tr>
  <tr>
    <td><input type="checkbox" value="4">选项 4</td>
    <td><input type="checkbox" value="5">选项 5</td>
    <td><input type="checkbox" value="6">选项 6</td>
  </tr>
</table>

接下来，我们将使用上面提到的代码，获取所有选中的复选框：

var checkedBoxes = $('input[type="checkbox"]:checked');
var checkedValues = checkedBoxes.map(function() {
  return this.value;
}).get();

console.log(checkedValues);

当用户勾选了第1个和第4个复选框时，控制台输出将会是：

["1", "4"]

另一个示例，现在我们想选取class属性为 group1 的复选框：

<input type="checkbox" name="vehicle-1" class="group1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle-2" class="group1" value="Car"> I have a car<br>
<input type="checkbox" name="vehicle-3" class="group2" value="Boat"> I have a boat<br>

使用 jQuery 就可以轻松地实现：

var checkedBoxes = $('input.group1:checked');
var checkedValues = checkedBoxes.map(function() {
  return this.value;
}).get();

console.log(checkedValues);

当用户勾选了Bike和Car时，控制台输出将会是：

["Bike", "Car"]

这就是获取所有选中复选框的方法，希望对你有所帮助！

Tags: