让我来详细讲解一下“如何在一个数组中使用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"]
这就是获取所有选中复选框的方法,希望对你有所帮助!