前端开发中，我们经常需要获取用户选择的多个选项，其中包括复选框。使用 jQuery 可以更加方便地实现这一功能，本文将介绍如何使用 jQuery 获取复选框列表的值。
HTML 代码
首先，我们需要在 HTML 页面中创建一个包含多个复选框的表单。以下是一个简单的示例：
<form id="myForm"> <input type="checkbox" name="fruit" value="apple">苹果<br> <input type="checkbox" name="fruit" value="banana">香蕉<br> <input type="checkbox" name="fruit" value="orange">橙子<br> </form>
在上述代码中，我们创建了一个表单，并在其中添加了三个复选框，它们的名称均为 "fruit"，对应的值分别为 "apple"、"banana" 和 "orange"。
获取选中的值
接下来，在 JavaScript 中使用 jQuery 获取选中的复选框的值。这可以通过以下代码实现：
var selectedFruits = [];
$('#myForm input:checked').each(function() {
selectedFruits.push($(this).val());
});
console.log(selectedFruits);在上述代码中，我们首先创建了一个空数组 selectedFruits，用于存储选中的复选框的值。然后，我们使用 jQuery 选择器选中名为 "myForm" 的表单中被选中的所有复选框，并使用 each() 方法遍历它们。在 each() 方法中，我们将每个选中的复选框的值添加到 selectedFruits 数组中。最后，我们使用 console.log() 输出选中的复选框的值。
示例代码
下面是一个完整的示例代码，包括 HTML、JavaScript 和 CSS：
-- -------------------- ---- -------
--------- -----
------
------
------------------------
------- -----------------------------------------------------------
-------
----- -
-------- ------
-
--------
-------
------
----- ------------
------------- --------------- ------------ ------------------------
------------- --------------- ------------ -------------------------
------------- --------------- ------------ -------------------------
-------
------- --------------------------
--------
---------------------------- -
-------------------------------- -
--- -------------- - ---
---------- ------------------------------- -
-----------------------------------
---
----------------------------
---
---
---------
-------
-------在上述示例代码中，我们使用了 jQuery 的 ready() 方法，确保文档加载完成后再执行 JavaScript 代码。当用户点击 "提交" 按钮时，将执行我们之前介绍的获取选中的复选框值的代码，并将结果输出到控制台。
总结
本文介绍了如何使用 jQuery 获取复选框列表的值，并提供了一个完整的示例代码。通过学习本文，读者可以更加方便地实现获取复选框值的功能，并在实际开发中应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29386