使用 jQuery 或纯 JS 获取多选框的值-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会涉及到获取表单元素的值。而多选框是一种特殊的表单元素，它可以允许用户选择多个选项。本文将介绍如何使用 jQuery 或纯 JS 来获取多选框的值，并提供相应的示例代码。

使用 jQuery 获取多选框的值

jQuery 是一个广泛使用的 JavaScript 库，它可以帮助我们更方便地访问和操作 DOM 元素。下面是使用 jQuery 获取多选框的值的示例代码：

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

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

这段代码首先通过选择器 input[name="multiselect"]:checked 获取了所有被选中的多选框元素，然后使用 each() 方法遍历得到每一个选中的元素，并将其值存入数组 selectedValues 中。如果只需要获取第一个选中的选项，则可以使用选择器 :first。

使用纯 JS 获取多选框的值

如果您不想引入额外的库，也可以使用纯 JS 来获取多选框的值。下面是使用纯 JS 获取多选框的值的示例代码：

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

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

这段代码首先通过 getElementsByName() 方法获取了所有名称为 multiselect 的多选框元素，然后使用循环遍历得到每一个元素，并判断其是否被选中，将选中的元素值存入数组 selectedValues 中。如果只需要获取第一个选中的选项，则可以使用 querySelector() 方法结合选择器 :checked。

总结

无论是使用 jQuery 还是纯 JS，都可以轻松地获取多选框的值。在实际开发中，根据具体情况选择合适的方法即可。同时，在获取表单元素的值时，也应该注意数据类型的转换和校验，以确保数据的准确性和安全性。

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