jquery 获取checkbox值

jQuery 获取 Checkbox 值

在前端开发中，复选框（Checkbox）是常用的一种表单元素，用于让用户选择多个选项。当需要获取用户所选择的复选框值时，可以使用 jQuery 来简化操作。本文将介绍如何使用 jQuery 获取 Checkbox 的值，并提供相关的代码示例。

1. 先决条件

在开始之前，需要确保已经引入了 jQuery 库。可以通过以下方式引入：

<script src="

2. 获取单个 Checkbox 值

要获取单个 Checkbox 的值，首先需要选中该元素，然后通过 jQuery 提供的属性方法来获取其值。

以下是一个示例代码，演示了如何获取单个复选框的值：

<input type="checkbox" id="checkbox1" value="apple"> 苹果
<input type="checkbox" id="checkbox2" value="banana"> 香蕉
<input type="checkbox" id="checkbox3" value="orange"> 橙子

<script>
$(document).ready(function() {
  $('#checkbox1').change(function() {
    if (this.checked) {
      var value = $(this).val();
      console.log(value);
    }
  });
});
</script>

以上代码中，我们通过 change 事件监听了复选框的改变，然后使用 val() 方法获取选中的复选框的值，最后将其输出到控制台。

3. 获取多个 Checkbox 值

如果需要获取多个复选框的值，可以使用 jQuery 提供的选择器来选中这些复选框，然后循环遍历获取每个复选框的值。

以下是一个示例代码，演示了如何获取多个复选框的值：

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

<button id="btn">获取选中的水果</button>

<script>
$(document).ready(function() {
  $('#btn').click(function() {
    var selectedFruits = [];

    $('.fruit:checked').each(function() {
      selectedFruits.push($(this).val());
    });

    console.log(selectedFruits);
  });
});
</script>

以上代码中，我们定义了一个类名为 fruit 的复选框组，并使用 .fruit:checked 选择器来选中被选中的复选框。然后使用 each() 方法循环遍历选中的复选框，通过 val() 方法获取每个复选框的值，并将其添加到 selectedFruits 数组中。

4. 流程图

下面是获取 Checkbox 值的流程图：

flowchart TD
  A[开始]
  B[选中复选框]
  C[获取复选框的值]
  D[输出或处理值]
  A --> B
  B --> C
  C --> D
  D --> B

5. 类图

类图描述了相关的 jQuery 方法和属性：

classDiagram
  class jQuery {
    +val()
    +each()
  }
  class Checkbox {
    +checked
    +change()
  }
  class Button {
    +click()
  }
  class Selector {
    +fruit
    +fruit:checked
  }
  class Array {
    +push()
  }
  class Console {
    +log()
  }
  jQuery <-- Checkbox
  jQuery <-- Button
  Selector <|-- Checkbox
  Selector <|-- Array
  Console <-- Button