jquery input 循环获取选中值

原创

mob64ca12dcc794 2024-08-12 05:21:40 ©著作权

文章标签 jQuery HTML 输入框 文章分类 jQuery 前端开发

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

用 jQuery 实现 Input 循环获取选中值

在Web开发中，有时我们需要获取一个表单中多个输入框的选中值。jQuery是一个强大的JavaScript库，可以有效地帮助我们简化这个过程。本文将通过一个实例，教你如何通过jQuery循环获取选中值。

流程步骤

以下是实现这一功能的步骤概述：

步骤	描述
1	引入 jQuery 库
2	创建 HTML 表单与输入框
3	编写 jQuery 代码
4	运行代码并测试效果

步骤详解

1. 引入 jQuery 库

在你的 HTML 文件中引入 jQuery 库。在 <head> 标签中添加以下代码：

<head>
    <script src="
</head>

2. 创建 HTML 表单与输入框

接下来，创建一个简单的表单，其中包含几个复选框或单选按钮让用户选择。以下是一个示例：

<body>
    <form id="myForm">
        <input type="checkbox" name="options" value="Option 1"> Option 1<br>
        <input type="checkbox" name="options" value="Option 2"> Option 2<br>
        <input type="checkbox" name="options" value="Option 3"> Option 3<br>
        <button type="button" id="getValues">获取选中值</button>
    </form>
    <div id="result"></div>
</body>

3. 编写 jQuery 代码

现在，我们需要编写 jQuery 代码，实现获取选中值的功能。我们将为按钮添加点击事件，将选中的值存入一个数组，并显示这些值。

$(document).ready(function() {
    // 当文档加载完成后，绑定按钮的点击事件
    $('#getValues').click(function() {
        let selectedValues = []; // 定义一个空数组，用于存储选中值
        // 遍历所有选中的复选框
        $('input[name="options"]:checked').each(function() {
            selectedValues.push($(this).val()); // 获取每个选中复选框的值，并推入数组
        });
        // 将选中值显示在页面上
        $('#result').text('选中值: ' + selectedValues.join(', '));
    });
});

4. 运行代码并测试效果

完成上述代码后，打开你的HTML文件，在浏览器中点击按钮，你将看到选中的值显示在页面上。

类图

下面是展示了我们表单和jQuery之间关系的类图：

classDiagram
    class Form {
        +Checkbox[] options
        +getValues()
    }
    class Checkbox {
        +String value
        +Boolean isChecked()
    }
    Form --> Checkbox

旅行图

接下来，我们来看一下操作的旅行图，记录了用户操作的过程：

journey
    title 用户获取选中值的过程
    section 用户操作
      用户打开表单: 5: 用户
      用户选择 选项 1 和 选项 2: 4: 用户
      用户点击 获取选中值: 5: 用户
    section 系统反馈
      系统返回 选中值: 5: 系统