jQuery 复选框获取选中的值

原创

mob649e8168f1bb 2024-08-04 07:36:12 ©著作权

文章标签 复选框 jQuery 代码示例 文章分类 jQuery 前端开发

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

jQuery 复选框获取选中的值

在现代网页开发中，表单是用户与网站交互的重要部分。复选框（Checkbox）作为表单元素之一，允许用户进行多项选择。本文将重点探讨如何使用 jQuery 获取选中的复选框的值，并提供详细的代码示例和相关流程图。

复选框的基本概念

复选框是 HTML 的基本表单元素，它允许用户选择一个或多个选项。每个复选框都有一个与之关联的值，当复选框被选中时，表单提交时就会包含该值。

常见的复选框 HTML 代码如下：

<form id="myForm">
    <label><input type="checkbox" name="fruit" value="apple"> 苹果</label><br>
    <label><input type="checkbox" name="fruit" value="banana"> 香蕉</label><br>
    <label><input type="checkbox" name="fruit" value="orange"> 橙子</label><br>
    <input type="submit" value="提交">
</form>
<div id="result"></div>

jQuery 获取被选中复选框的值

为了获取用户选择的复选框的值，我们可以使用 jQuery 的选择器和方法配合来完成。以下是获取选中复选框值的代码示例：

引入 jQuery 库
使用 jQuery 选择所有被选中的复选框
遍历这些复选框并将它们的值存储到一个数组中
显示选中的值

完整代码示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取复选框值</title>
    <script src="
    <script>
        $(document).ready(function() {
            $("#myForm").submit(function(event) {
                // 阻止表单的默认提交行为
                event.preventDefault();
                
                // 空数组，用于存储被选中的复选框的值
                var selectedValues = [];
                
                // 查找所有被选中的复选框，并将它们的值存入数组
                $("input[name='fruit']:checked").each(function() {
                    selectedValues.push($(this).val());
                });

                // 显示结果
                $("#result").html("您选择的水果是: " + selectedValues.join(", "));
            });
        });
    </script>
</head>
<body>
    <form id="myForm">
        <label><input type="checkbox" name="fruit" value="apple"> 苹果</label><br>
        <label><input type="checkbox" name="fruit" value="banana"> 香蕉</label><br>
        <label><input type="checkbox" name="fruit" value="orange"> 橙子</label><br>
        <input type="submit" value="提交">
    </form>
    <div id="result"></div>
</body>
</html>

代码解释

引入 jQuery：在HTML文档的头部引入了 jQuery 库，以便使用 jQuery 的功能。
表单提交事件：使用 jQuery 的 submit 事件监听器，处理表单的提交。
阻止默认提交：在处理函数中调用 event.preventDefault()，阻止浏览器的默认表单提交行为。
获取复选框值：使用选择器 input[name='fruit']:checked 获取所有被选中的复选框，然后遍历它们，将值存储在 selectedValues 数组中。
显示结果：最后，通过更新 #result div 的内容，显示用户选择的复选框值。

流程图

下面是这个过程的流程图，使用 Mermaid 语法表示：

flowchart TD
    A[用户选择复选框] --> B[点击提交按钮]
    B --> C{是否有选中复选框?}
    C --Yes--> D[收集选中的值]
    C --No--> E[显示“未选择任何选项”]
    D --> F[显示选中的结果]

类图

在实际开发中，复选框的选择可能涉及到更复杂的数据结构和管理。以下是一个简单的类图示例，表示复选框的基本结构及其关系：

classDiagram
    class Checkbox {
        +String value
        +Boolean isChecked
        +toggle() 
    }
    
    class Form {
        +List<Checkbox> checkboxes
        +submit()
    }

    Form --> Checkbox : contains