jQuery 获取所有选中的复选框

在Web开发中，复选框（Checkbox）是常用的表单元素之一。当我们需要获取页面中所有被选中的复选框的值时，可以使用jQuery来实现。本文将介绍如何使用jQuery来获取所有选中的复选框，并提供相应的代码示例。

1. HTML结构

首先，我们需要在HTML中创建一组复选框，以便演示获取选中复选框的功能。以下是一个示例的HTML结构：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 获取所有选中的复选框</title>
  <script src="
</head>
<body>
  <h3>选择你喜欢的水果：</h3>
  <input type="checkbox" name="fruit" value="apple">苹果
  <input type="checkbox" name="fruit" value="banana">香蕉
  <input type="checkbox" name="fruit" value="orange">橙子
  <input type="checkbox" name="fruit" value="strawberry">草莓
  <input type="checkbox" name="fruit" value="watermelon">西瓜
  <button id="btn">获取选中的复选框</button>
  
  <script>
    // 在这里编写jQuery代码
  </script>
</body>
</html>

在以上示例代码中，我们创建了一组具有相同name属性的复选框，这是为了使它们成为一组相关的复选框。我们还添加了一个按钮，以便在点击按钮时获取选中的复选框的值。

2. jQuery获取选中的复选框

接下来，我们需要使用jQuery来获取所有选中的复选框的值。为此，我们可以使用:checked选择器来选择所有被选中的复选框，并使用.each()方法遍历它们。以下是相应的代码示例：

<script>
$(document).ready(function() {
  $('#btn').click(function() {
    var selectedCheckbox = []; // 用于存储选中复选框的值的数组
    $('input[name="fruit"]:checked').each(function() {
      selectedCheckbox.push($(this).val());
    });
    console.log(selectedCheckbox);
  });
});
</script>

在以上代码中，我们首先使用$(document).ready()方法，确保在文档加载完成后再执行jQuery代码。然后，我们通过$('#btn').click()方法为按钮绑定一个点击事件。

在点击事件的处理函数中，我们创建了一个空数组selectedCheckbox来存储选中的复选框的值。接下来，我们使用$('input[name="fruit"]:checked')选择器选择所有被选中的复选框，并使用.each()方法遍历它们。

在.each()方法的回调函数中，我们使用$(this).val()来获取每个被选中复选框的值，并将其添加到selectedCheckbox数组中。最后，我们通过console.log(selectedCheckbox)打印出选中的复选框的值。

3. 完整示例代码

下面是完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 获取所有选中的复选框</title>
  <script src="
</head>
<body>
  <h3>选择你喜欢的水果：</h3>
  <input type="checkbox" name="fruit" value="apple">苹果
  <input type="checkbox" name="fruit" value="banana">香蕉
  <input type="checkbox" name="fruit" value="orange">橙子
  <input type="checkbox" name="fruit" value="strawberry">草莓
  <input type="checkbox" name="fruit" value="watermelon">西瓜
  <button id="btn">获取选中的复选框</button>
  
  <script>
    $(document).ready(function() {
      $('#btn').click(function() {
        var selectedCheckbox = []; // 用于存储选中复选框的值的数组
        $('input[name="fruit"]:checked').each(function() {
          selectedCheckbox.push($(this).val());
        });
        console.log(selectedCheckbox);
      });
    });
  </script>
</body>
</html>