在前端开发中，有时候需要获取多选框的选中值，以便进行后续操作。本文将介绍几种实现方式，并提供代码示例。
方法一：使用原生 JavaScript
可以使用原生 JavaScript 遍历多选框，判断是否选中，如果选中，则将其值添加到数组中。代码如下：
-- -------------------- ---- -------
----- -------------- - --- -- ----------
----- ---------- - ---------------------------------------------------- -- -------
----------------------------- -- -
-- ------------------ - -- ------
------------------------------------ -- ----------
-
---
----------------------------方法二：使用 jQuery 库
如果项目中已经引入了 jQuery 库，则可以使用 jQuery 的 :checked 选择器获取选中的多选框。代码如下：
const selectedValues = []; // 用于存储选中值的数组
$('input[type="checkbox"]:checked').each(function() {
selectedValues.push($(this).val()); // 将选中值添加到数组中
});
console.log(selectedValues);方法三：使用 Vue.js 双向数据绑定
如果项目中使用了 Vue.js 框架，则可以通过双向数据绑定来获取选中的多选框。代码如下：
HTML 代码：
<div id="app"> <label><input type="checkbox" value="apple" v-model="checkedFruit">Apple</label> <label><input type="checkbox" value="banana" v-model="checkedFruit">Banana</label> <label><input type="checkbox" value="orange" v-model="checkedFruit">Orange</label> </div>
Vue.js 代码：
-- -------------------- ---- -------
----- --- - --- -----
--- -------
----- -
------------- -- -- ----------
--
------ -
------------- ---------- -
-------------------------------
-
-
---总结
本文介绍了三种获取多选框选中值的方法。使用原生 JavaScript 或 jQuery 库的方法比较简单，适合小型项目或快速原型开发；而使用 Vue.js 双向数据绑定的方法则更加方便和灵活，适合大型项目或需要复杂交互的应用。选择哪种方法，取决于具体项目需求和个人喜好。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14581
