Python Flask开发中如何将后端值传递给HTML checkbox组件？

1. 后端路由配置 #

直接在Flask路由中把存储的示例值打包传递给前端模板，不需要额外依赖：

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def show_checkbox_page():
    # 后端存储的三类示例值
    item_list = ["milk", "chocolate", "water"]
    # 通过render_template参数把列表传递给前端模板
    return render_template("index.html", items=item_list)

if __name__ == "__main__":
    app.run(debug=True)

• 传值的核心逻辑是：render_template(模板文件路径, 前端可访问的变量名=后端实际存储的变量值)，只要前端模板内用对应变量名，就能直接读取后端传递的数据。

2. 前端模板渲染逻辑 #

Flask 内置Jinja2模板引擎，不需要单独配置，直接在HTML中写循环逻辑就能批量生成checkbox，避免重复手写标签：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选项列表</title>
</head>
<body>
    <p>可选择的商品：</p>
    <form action="/" method="get">
        <!-- 遍历后端传入的items列表，逐个生成复选框 -->
        {% for item in items %}
        <div style="margin: 8px 0;">
            <!-- 复选框的值和显示文本直接从循环变量中取 -->
            <input type="checkbox" name="selected" id="opt_{{ item }}" value="{{ item }}">
            <label for="opt_{{ item }}">{{ item }}</label>
        </div>
        {% endfor %}
        <button type="submit">提交</button>
    </form>
</body>
</html>

• *提醒：编写好的index.html文件需要放在项目根目录下的templates专属文件夹内，Flask才能正常识别读取模板。

3. 入门阶段常见踩坑点 #

• 前后端变量名必须完全匹配：后端传值时定义的前端变量名是items，模板里不能写成其他名字，否则会出现变量未定义的报错。
• 同组复选框的name属性必须统一：如果每个checkbox的name属性不一样，提交表单时后端无法一次性获取所有选中的选项值。
• 自定义默认勾选：如果需要让某个选项加载就处于选中状态，只要在input标签内加判断输出checked属性即可，比如{% if item == "water" %}checked{% endif %}，就能让water选项默认勾选。

内容的提问来源于stack exchange，提问作者Ram dr