flask 获取form表单中复选框选中的值

最新推荐文章于 2025-11-10 15:19:42 发布

原创最新推荐文章于 2025-11-10 15:19:42 发布 · 4.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#python

flask 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用Flask框架处理HTML表单提交的例子，展示了如何通过POST方法收集复选框选择的数据，并在服务器端获取这些数据。

前端代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

        <form method="post" action="/test">
            <input type="checkbox" name="hobby" value="reading" checked="checked">阅读<br>
            <input type="checkbox" name="hobby" value="running" >跑步<br>
            <input type="checkbox" name="hobby" value="other" checked="checked">其他<br>
            <input type="checkbox" name="hobby" value="dancing" checked="checked">跳舞<br>
            <input type="submit" value="提交">
        </form>

</body>

</html>

flask代码

@app.rout("/test")
def test():
	hobby_list = request.from.getlist("hobby") # hobby_list = ["reading","other","dancing"]

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

syousetu

关注关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Flask获取select的值

坐公交也用券

03-06

522

Flask获取html Select标签的值

详细了解Flask框架的入门

web13765607643的博客

12-09

1306

Flask 是一个以微核心设计为基础的轻量级 Web 应用框架，它提供了 Web 开发的基础功能，如路由、请求处理和响应构建。这种设计哲学使得 Flask 既简单直观，易于新手上手，又足够灵活，能够满足经验丰富的开发者的需求。开发者可以根据自己的项目需求，选择性地添加各种 Flask 扩展，实现如数据库集成、表单验证等额外功能。Flask 是一个轻量级的 Web 应用框架，它以微核心设计为基础，提供了 Web 开发的基础功能，包括路由、请求处理和响应构建。

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

yiquyu 2021.11.28
不是from是form吧

flask-web开发中获取表单复选框的方法

最新发布

v6b7n8m9q0的博客

11-10

本文详细介绍了HTML中音视频与表单元素的使用方法，涵盖图像映射、video和audio元素的属性与备用方案、source元素的格式支持、表单结构与输入类型（如text、email、radio、checkbox等），以及select和textarea的用法。同时讲解了表单布局规则、数据提交机制与浏览器兼容性注意事项，并提供了清晰的操作流程图，帮助开发者构建功能完善、用户体验良好的网页。

宝可梦图鉴网站，提供给我完整的代码数据库：mysql 精灵信息：ID、精灵名称、获取状态、获取途径、备注每页精灵信息100条获取状态通过复选框实现，勾选则获取状态显示已获取，未勾选且获取途径为空值则获取状态显示未获取，未勾选且获取途径不为空值则获取状态显示可获取网站分精灵信息界面，编辑精灵信息界面，筛选精灵信息界面，搜索精灵信息界面数据库创建和表创建要有详细的操作步骤开发软件要有详细的部署网站要有详细的使用说明和项目架构

09-19

obtained = request.form.get('obtained') == 'on' # 复选框，选中为'on' obtain_method = request.form['obtain_method'] notes = request.form['notes'] with conn.cursor() as cursor: sql = """ UPDATE ...

Flask request 返回网页中 checkbox 是否选中

A Little Bean

06-28

1997

【代码】Flask request 返回网页中 checkbox 是否选中。

【Python成长之路】基于Flask开发网站--利用复选框进行批量操作

yuzipeng的专栏

05-29

1585

哈喽大家好，我是鹏哥。今天我想写的内容是——基于Flask实现网页表格的批量删除。 ~~~上课铃~~~ LiberatorsEpicScore-Vengeance-ES033 1 写在前面由于近期有同事在工作中向我求助网页可视化怎么做，对于从来没有学过html/vue/javascript等框架开发的我来说，只能说我试试吧。所以针对他的诉求“通过复选框进行批量操作”，我自己就百度学习。然后写点东西记录下，或者对以后的同学有所帮助。 2 ...

如何在form表单上寻找到被选中的checkbox的值

weixin_30883311的博客

11-05

1165

在jQuery中存在着很多方式来寻找到自己想要获取的值，比如$(#id).val()或者$(.class).val()的方式来获取到相应的值，但是现在我有一个多选的CheckBox类型的值，我改通过什么方式来动态的获取自己选中的CheckBox的值呢？我寻找了很多种方法，也实验了很多次，终于找到了方法。下面的是我的HTML中的截图。我要获取自己选中的CheckBox的值，可以通过以下两种方...

python获取checkbox的值

weixin_34669755的博客

07-05

340

Flask Web开发：用Select2实现类似知乎的标签系统

03-02

4263

知乎的标签是这样的用Select 2实现的是这样的实现分类 Select2主要是用来美化分类表单，在使用之前要先实现分类的功能，简单的可以一对多，难一点可以搞一个多对多一对多关系的分类如果只是想一篇文章设置一个分类，可以用一对多，“一”这边是某个分类，然后“多”这一边就是要添加到该分类下的文章，书中虽然没有直接实现这样的分类功能，但是已经实现了一对多的关系，可以参考着

Flask 将前端多行checkbox选中行某一列的数据传递给后端

weixin_41420300的博客

12-27

1452

前端代码 // 一键要求选中的任务再次反馈 function feed_back_again(obj) { // 先获取选中的任务，如果没有选中任何任务就报错进行提示 // 1.获取所有行，2.判断被选中的行，3.获取选中行的task_id，4.把数据放进数组中，5.传递给后端 var list_task = []; var a = $("#rl_table").find(“input[name=...

在FLASK框架下，如何实现selectFiled联动选择

sharksunxf的博客

01-12

1556

Flask实现联动选择

筛选数据_Flask学习笔记（十八）：数据筛选

weixin_39829073的博客

12-08

1169

前言在业务程序中，通常情况下要处理数据表格，当表格规模较大时，我们采用的是分页功能，关于这一点，在上一篇文章中已经介绍过。然而，还有一个问题是必须面对的，那就是需要根据不同的条件进行数据筛选，当需要快速筛选时，将少量条件筛选框与数据放在同一个页面上是非常有必要的。这一篇文章即来研究一下当条件筛选框与查询数据同一个页面时该怎么处理。创建条件筛选表单首先当然是创建表单，还是以用户管理这个小程...

Flask 页面展示文件目录及文件，通过勾选复习框删除

人生苦短，何妨一试

07-22

1192

Flask 页面展示文件目录及文件，通过勾选复习框删除。

在layui中如何监听form表单中复选框的选中触发的

04-13

<think>好的，用户的问题是关于如何在Layui框架中监听表单复选框的选中事件。我需要先回顾一下Layui的文档和相关引用内容。用户提到了引用[1]中的问题，使用layui-form类导致onclick失效，去掉后样式失效。这说明直接使用onclick可能被Layui的事件处理干扰了。引用[2]提到JavaScript通过checked属性判断复选框状态，但可能需要结合Layui的方法。引用[3]则是在fsLayui2树形组件中添加了onCheck事件，这可能提示自定义事件处理的方法。首先，Layui有自己的表单模块，应该使用其内置的事件监听方式。根据官方文档，可以使用form.on('checkbox(filter)', callback)来监听复选框变化。但用户可能试过onclick不起作用，所以需要指导正确的方法。接下来，我需要分步骤说明解决方案。第一步是确保表单渲染正确，使用layui-form类。第二步是使用form.on来监听复选框事件，指定filter名称。第三步是在回调函数中处理选中状态，可能需要用elem.checked获取状态，或者使用jQuery的方法。另外，用户可能遇到动态生成的复选框无法监听的问题，这时候需要重新渲染表单，执行form.render('checkbox')。需要提醒用户注意这一点。还要考虑用户可能想用原生的onclick，但被Layui阻止了，所以应该推荐使用Layui自带的事件监听方式，以确保兼容性和样式正确。最后，总结常见问题，比如过滤器名称匹配、动态加载元素需要重新渲染等。确保回答结构清晰，步骤明确，用户能一步步操作。</think>### 如何在Layui框架中监听复选框选中事件 #### 方法一：使用Layui内置表单事件监听 1. **确保表单元素正确渲染** 在HTML结构中，必须包含`class="layui-form"`以保证Layui样式生效： ```html <form class="layui-form"> <input type="checkbox" name="test" lay-filter="checkboxFilter" title="选项"> </form> ``` 2. **通过`form.on`监听复选框事件** 使用Layui的`form.on`方法监听复选框状态变化，通过`lay-filter`属性指定过滤器名称： ```javascript layui.use('form', function(){ var form = layui.form; // 监听复选框选中/取消 form.on('checkbox(checkboxFilter)', function(data){ console.log("复选框状态:", data.elem.checked); // 输出选中状态 // 执行自定义逻辑 }); }); ``` #### 方法二：结合原生JavaScript事件（需谨慎）若需使用原生事件，需在Layui初始化后绑定事件，并确保元素已渲染： ```javascript layui.use('form', function(){ var form = layui.form; form.render(); // 渲染表单 // 手动绑定点击事件 document.querySelector('[name="test"]').addEventListener('click', function(){ console.log("选中状态:", this.checked); }); }); ``` #### 注意事项 1. **动态生成元素的处理** 若复选框通过Ajax动态加载，需重新渲染表单： ```javascript form.render('checkbox'); // 重新渲染复选框 ``` 2. **事件冲突问题** 避免直接使用`onclick`属性（可能导致Layui事件失效），优先通过`lay-filter`监听[^1][^3]。