在前端开发中，我们经常会涉及到获取表单元素的值。而多选框是一种特殊的表单元素，它可以允许用户选择多个选项。本文将介绍如何使用 jQuery 或纯 JS 来获取多选框的值，并提供相应的示例代码。
使用 jQuery 获取多选框的值
jQuery 是一个广泛使用的 JavaScript 库，它可以帮助我们更方便地访问和操作 DOM 元素。下面是使用 jQuery 获取多选框的值的示例代码：
// 获取所有选中的选项
var selectedValues = [];
$('input[name="multiselect"]:checked').each(function() {
selectedValues.push($(this).val());
});
// 获取第一个选中的选项
var firstSelectedValue = $('input[name="multiselect"]:checked:first').val();这段代码首先通过选择器 input[name="multiselect"]:checked 获取了所有被选中的多选框元素，然后使用 each() 方法遍历得到每一个选中的元素，并将其值存入数组 selectedValues 中。如果只需要获取第一个选中的选项，则可以使用选择器 :first。
使用纯 JS 获取多选框的值
如果您不想引入额外的库，也可以使用纯 JS 来获取多选框的值。下面是使用纯 JS 获取多选框的值的示例代码：
-- -------------------- ---- -------
-- ---------
--- -------------- - ---
--- ---------- - ------------------------------------------
--- ---- ---- -------------------- ---- -
--- -------- - --------------
-- ------------------ -
------------------------------------
-
-
-- ----------
--- ------------------ - ------------------------------------------------------------------这段代码首先通过 getElementsByName() 方法获取了所有名称为 multiselect 的多选框元素，然后使用循环遍历得到每一个元素，并判断其是否被选中，将选中的元素值存入数组 selectedValues 中。如果只需要获取第一个选中的选项，则可以使用 querySelector() 方法结合选择器 :checked。
总结
无论是使用 jQuery 还是纯 JS，都可以轻松地获取多选框的值。在实际开发中，根据具体情况选择合适的方法即可。同时，在获取表单元素的值时，也应该注意数据类型的转换和校验，以确保数据的准确性和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26738