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

在前端开发中，我们经常需要获取用户选择的多个复选框的值，并将这些值以数组的形式传递给后台处理。jQuery提供了一种简单而有效的方法来实现这一目标。

基本原理

通过使用jQuery选择器和.map()函数，我们可以遍历选中的复选框并将它们的值存储在一个数组中。具体步骤如下：

1. 使用jQuery选择器选择所有被选中的复选框。
2. 对所选元素应用.map()函数，将每个元素的值存储在一个数组中。
3. 返回数组。

示例代码

------
  ------------- --------------- ------------ ------------------------
  ------------- --------------- ------------ -------------------------
  ------------- --------------- ------------ -------------------------
  ------- ------------- -----------------------
-------

------- -----------------------------------------------------------
--------
------------ -
  ------------------------ ---------- -
    --- ---------- - ----------------------------------------------- -
      ------ --------------
    ---------
    ------------------------
  ---
---
---------

上面的代码演示了如何获取名为"fruit"的复选框的值，并将这些值存储在一个数组中。当用户点击"提交"按钮时，控制台会输出所选水果的值的数组。

解析代码

1. $('input[name="fruit"]:checked')选择所有名为"fruit"的复选框，并且只选择已选中的复选框。
2. .map()函数遍历所选元素并将每个元素的值返回给数组。
3. .get()方法将jQuery对象转换为JavaScript数组。

总结

通过使用jQuery的选择器和.map()函数，我们可以轻松地获取选中复选框的值并将其存储在一个数组中。这种方法简单易用，能够提高开发效率，适用于大多数情况下需要处理多选数据的场景。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10890