jquery获取被选中多选

jQuery获取被选中的多选框（Checkbox）是一种非常常见的需求，尤其是在处理表单数据时，在这篇文章中，我们将详细介绍如何使用jQuery来获取被选中的多选框，并通过实例演示如何将这些数据应用于实际场景。

我们需要了解什么是多选框，多选框（Checkbox）是一种表单元素，允许用户从多个选项中选择多个值，在HTML中，多选框由<input>标签创建，并通过type="checkbox"属性定义，以下HTML代码创建了一个包含三个选项的多选框：

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

接下来，我们将使用jQuery来获取这些被选中的多选框，jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互，要使用jQuery，首先需要在网页中引入jQuery库，可以通过以下方式引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

现在，我们可以使用jQuery来获取被选中的多选框，以下是一个简单的示例，展示了如何获取选中的多选框的值：

$(document).ready(function() {
  // 当点击按钮时触发事件
  $('button').click(function() {
    // 获取所有被选中的多选框
    var selectedFruits = $('input[name="fruit"]:checked');
    
    // 遍历被选中的多选框，并输出它们的值
    selectedFruits.each(function() {
      console.log($(this).val());
    });
  });
});

在上面的示例中，我们首先使用$(document).ready()函数确保DOM完全加载后执行代码，我们为按钮绑定了一个点击事件，当按钮被点击时，将触发一个事件处理函数。

在事件处理函数中，我们使用$('input[name="fruit"]:checked')选择器获取所有被选中的名为"fruit"的多选框。:checked选择器是一个非常有用的工具，它可以轻松地识别被选中的多选框，接下来，我们使用.each()函数遍历这些被选中的多选框，并使用$(this).val()获取它们的值。

现在，我们已经知道如何获取被选中的多选框，我们可以将这些数据应用于实际场景，我们可以将选中的多选框的值存储到一个数组中，以便在提交表单时一起发送，以下是一个示例：

$(document).ready(function() {
  // 当点击按钮时触发事件
  $('button').click(function() {
    // 获取所有被选中的多选框
    var selectedFruits = [];
    $('input[name="fruit"]:checked').each(function() {
      selectedFruits.push($(this).val());
    });
    
    // 输出选中的多选框的值
    console.log(selectedFruits);
  });
});

在这个示例中，我们创建了一个名为selectedFruits的空数组，我们遍历被选中的多选框，并将它们的值添加到selectedFruits数组中，我们将这个数组输出到控制台。

使用jQuery获取被选中的多选框非常简单且实用，通过这个方法，你可以轻松地处理多选框相关的数据，从而提高你的Web应用程序的交互性和用户体验。