jQuery如何获取多个选中的值

原创

mob649e81630984 2024-01-07 09:37:45 ©著作权

文章标签 jQuery 复选框 HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e81630984的原创作品，请联系作者获取转载授权，否则将追究法律责任

如何使用jQuery获取多个选中的值

在Web开发中，有时我们需要获取多个选中的值，例如多选框、下拉列表等。使用jQuery可以很方便地实现这一功能。本文将介绍如何使用jQuery来获取多个选中的值，并通过一个具体的问题来演示。

问题描述

假设我们正在开发一个在线问卷系统，其中有一个问题类型是多选题。用户可以从一个包含多个选项的列表中选择多个答案。我们需要通过jQuery来获取用户选择的所有答案。

解决方案

HTML代码

首先，我们需要在HTML中创建一个包含多个选项的列表，以及一个按钮用于提交答案。以下是一个示例的HTML代码：

<div>
  <label><input type="checkbox" name="option" value="option1"> Option 1</label>
  <label><input type="checkbox" name="option" value="option2"> Option 2</label>
  <label><input type="checkbox" name="option" value="option3"> Option 3</label>
  <label><input type="checkbox" name="option" value="option4"> Option 4</label>
</div>

<button id="submit">Submit</button>

在上述代码中，我们使用了多个复选框来表示选项，并给每个复选框设置了相同的name属性值，这样它们就属于同一个组。

jQuery代码

接下来，我们使用jQuery来获取用户选择的答案。以下是一个示例的jQuery代码：

$(document).ready(function() {
  $('#submit').click(function() {
    var selectedValues = [];

    $('input[name="option"]:checked').each(function() {
      selectedValues.push($(this).val());
    });

    console.log(selectedValues);
  });
});

在上述代码中，我们使用了jQuery的each方法来迭代选中的复选框。通过$('input[name="option"]:checked')选择器，我们可以获取到所有被选中的复选框。然后，我们使用$(this).val()来获取每个被选中复选框的值，并将其添加到selectedValues数组中。

最后，我们通过console.log(selectedValues)来打印出用户选择的所有答案。

流程图

下面是一个使用mermaid流程图语法表示的简单流程图，展示了上述代码的执行流程：

graph TD
    A[开始] --> B[绑定按钮点击事件]
    B --> C[创建空数组selectedValues]
    C --> D[迭代选中的复选框]
    D --> E[获取复选框的值并添加到selectedValues]
    E --> F[打印出selectedValues]
    F --> G[结束]