jquery 复选框指定值默认选中

原创

mob649e815f0f18 2024-10-20 05:49:46 ©著作权

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

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

jQuery 复选框指定值默认选中教程

作为一名新手开发者，可能对于如何使用 jQuery 操作复选框感到有些困惑。本文将逐步引导你如何实现“jQuery 复选框指定值默认选中”的功能，并提供详细代码以及解释。

流程概述

在实现复选框默认选中的功能前，我们首先要明确整个流程。以下是各步骤简要说明：

步骤	描述
1	创建 HTML 结构
2	引入 jQuery 库
3	使用 jQuery 选择复选框并设置默认选中
4	测试效果

详细步骤

步骤 1: 创建 HTML 结构

我们首先需要创建一个基本的 HTML 页面，并在其中添加复选框。例如：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>默认选中复选框</title>
    <link rel="stylesheet" href="style.css"> <!-- 样式文件 -->
    <script src=" <!-- 引入 jQuery -->
    <script src="script.js"></script> <!-- 引入脚本文件 -->
</head>
<body>
    <form>
        <label><input type="checkbox" value="option1"> 选项 1</label><br>
        <label><input type="checkbox" value="option2"> 选项 2</label><br>
        <label><input type="checkbox" value="option3"> 选项 3</label><br>
    </form>
</body>
</html>

在这个结构中，我们创建了三个复选框，每个复选框都有一个 value 属性。

步骤 2: 引入 jQuery 库

在 <head> 标签中，我们已经通过 CDN 引入了 jQuery 库。这样，我们就可以在后面的 JavaScript 文件中使用 jQuery 的功能。

步骤 3: 使用 jQuery 选择复选框并设置默认选中

在你的 script.js 文件中，我们将使用以下代码：

$(document).ready(function() {
    // 定义一个数组，包含我们想要默认选中的复选框的值
    const defaultSelectedValues = ["option1", "option3"];
    
    // 遍历数组，选择对应的复选框并设置为选中状态
    defaultSelectedValues.forEach(function(value) {
        $("input[type='checkbox'][value='" + value + "']").prop("checked", true); // 选中复选框
    });
});

解释：

$(document).ready(function() { ... })：等待文档加载完成后执行内部代码。
const defaultSelectedValues = ["option1", "option3"];：定义一个包含默认选中复选框值的数组。
forEach：遍历上述数组，针对每个值执行内部函数。
$("input[type='checkbox'][value='" + value + "']")：选择特定值的复选框。
.prop("checked", true)：使复选框处于选中状态。

步骤 4: 测试效果

完成上述步骤后，打开浏览器，访问该 HTML 文件，你将看到指定值的复选框已默认被选中。

甘特图

为了更清晰地展示该项目的时间管理，我们可以使用以下甘特图来规划：

gantt
    title 复选框默认选中实现计划
    dateFormat  YYYY-MM-DD
    section 准备阶段
    创建 HTML 结构          :done, 2023-10-01, 1d
    引入 jQuery 库          :done, 2023-10-01, 1d
    section 实现阶段
    书写 jQuery 代码        :active, 2023-10-01, 1d
    测试功能                : 2023-10-02, 1d