在前端开发中，经常会遇到需要获取复选框组选中的值的情况。jQuery 是一个广泛使用的 JavaScript 库，提供了许多方便的方法来操作 DOM 元素，包括选择器(selector)。在本文中，我们将介绍如何使用 jQuery 选择复选框组的值。
选择器基础
在 jQuery 中，选择器是一种用于选择 DOM 元素的表达式。它可以是元素名称、类名、ID、属性等等。例如：
-- -------------------- ---- ------- -- ---- ------- -- ---------- -- ----- ---------- ----- -------------- -- -- -- - ------------ --- ---------------- -- ------ ---------- ------- --- -------------------
更多关于 jQuery 选择器的内容，可以参考 jQuery API 文档。
获取复选框组的值
对于一个包含多个复选框的组，我们可以使用 :checked 选择器获取被选中的复选框，然后遍历这些元素并取出它们的值。例如：
<form> <input type="checkbox" name="fruit" value="apple"> <input type="checkbox" name="fruit" value="banana"> <input type="checkbox" name="fruit" value="orange"> </form>
var selectedFruits = $('input[name="fruit"]:checked').map(function() {
return $(this).val();
}).get();
console.log(selectedFruits); // ['apple', 'orange']在上面的示例中，我们首先选择所有 name 属性为 fruit 的复选框，并使用 :checked 过滤出被选中的复选框。然后，我们使用 map() 方法遍历这些元素，并将每个元素的值返回成一个数组。
最后，我们调用 get() 方法将 jQuery 对象转换为纯 JavaScript 数组。这样，我们就得到了一个包含所有被选中的复选框值的数组。
实现全选和反选功能
除了获取选中的值，我们还可以使用 jQuery 来实现全选和反选功能。例如：
<form> <input type="checkbox" name="fruit" value="apple"> <input type="checkbox" name="fruit" value="banana"> <input type="checkbox" name="fruit" value="orange"> <button id="checkAll">全选</button> <button id="uncheckAll">反选</button> </form>
-- -------------------- ---- -------
------------------------------- -
---------------------------------------- ------
---
--------------------------------- -
---------------------------------------- -
------------ - --------------
---
---在上面的示例中，我们分别为“全选”和“反选”按钮绑定了一个点击事件。当用户单击“全选”按钮时，我们使用 prop() 方法将所有复选框的 checked 属性设置为 true。当用户单击“反选”按钮时，我们则遍历每个复选框，并将其 checked 属性取反。
总结
通过本文，我们学习了如何使用 jQuery 选择器获取复选框组的值，以及实现全选和反选功能。这些技巧在前端开发中非常常用，希望能对读者有所帮助！
完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-----------------------
----- ----------------
------- -----------------------------------------------------------
--------
------------ -
--- -------------- - ----------------------------------------------- -
------ --------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------