jQuery获取选中的checkbox

在前端开发中，经常会遇到需要获取用户在页面上勾选的checkbox的需求。而使用jQuery可以很方便地实现这个功能。本文将介绍如何使用jQuery获取选中的checkbox，并给出相应的代码示例。

准备工作

首先，我们需要在页面中引入jQuery库。可以通过以下方式引入：

<script src="

或者下载jQuery库并引入本地文件。

接下来，我们需要在页面上定义一些checkbox供用户选择。例如：

<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子

代码实现

方法一：使用:checked选择器

使用jQuery的:checked选择器可以直接获取到选中的checkbox，然后通过遍历获取每个选中的值。

$(document).ready(function() {
  $('input[name="fruit"]').change(function() {
    var selectedFruits = [];
    $('input[name="fruit"]:checked').each(function() {
      selectedFruits.push($(this).val());
    });
    console.log(selectedFruits);
  });
});

解析上述代码：

  1. 当页面加载完成后，$(document).ready函数内的代码会执行。
  2. 当名为fruit的checkbox的选中状态发生变化时，$('input[name="fruit"]').change函数内的代码会执行。
  3. 在$('input[name="fruit"]:checked')中，input[name="fruit"]选择器用于选择所有名为fruit的checkbox，:checked选择器用于选择选中的checkbox。
  4. each函数用于遍历选中的checkbox，然后将其值存入selectedFruits数组。
  5. 最后，通过console.log输出选中的水果。

方法二：使用prop方法

prop方法可以获取或设置checkbox的属性。利用这个方法，我们可以直接判断某个checkbox是否选中。

$(document).ready(function() {
  $('input[name="fruit"]').change(function() {
    var selectedFruits = [];
    $('input[name="fruit"]').each(function() {
      if ($(this).prop('checked')) {
        selectedFruits.push($(this).val());
      }
    });
    console.log(selectedFruits);
  });
});

解析上述代码：

  1. 同样，当页面加载完成后，$(document).ready函数内的代码会执行。
  2. 当名为fruit的checkbox的选中状态发生变化时，$('input[name="fruit"]').change函数内的代码会执行。
  3. $('input[name="fruit"]').each用于遍历所有名为fruit的checkbox。
  4. 利用prop方法判断当前checkbox是否选中，如果选中则将其值存入selectedFruits数组。
  5. 最后，通过console.log输出选中的水果。

总结

以上就是使用jQuery获取选中的checkbox的方法。你可以根据自己的实际需求选择其中一种方法来实现。通过遍历选中的checkbox，我们可以获取到用户选择的值，然后进行进一步的处理。

希望本文对你理解如何使用jQuery获取选中的checkbox有所帮助。如有任何问题，欢迎留言讨论。

流程图

flowchart TD
    A[页面加载完成] --> B[勾选checkbox]
    B --> C{选中的checkbox发生变化?}
    C -- 是 --> D[遍历选中的checkbox]
    C -- 否 --> B
    D --> E[获取checkbox的值]
    E --> F[存入数组]
    F --> G[输出数组]

以上为获取选中的checkbox的流程图，通过流程图可以更清晰地理解整个过程。

参考资料：

  • [jQuery官方文档](
  • [W3School jQuery Tutorial](