html代码:

<form role="form" class="select_people"><div style="display: inline-block; margin-left: 30px; margin-top: 0"><label for="name">应用一组</label>{% for peopel_1 in peopels_1 %}<div class="checkbox"><label><input type="checkbox" value={{ peopel_1.name }} name="people_name">{{ peopel_1.name }} </label></div>{% endfor %}</div><div style="display: inline-block; margin-left: 40px"><label for="name">应用二组</label>{% for peopel_2 in peopels_2 %}<div class="checkbox"><label><input type="checkbox"value={{ peopel_2.name }} name="people_name">{{ peopel_2.name }} </label></div>{% endfor %}</div><button type="submit" style="margin-left: 40px" id="sub_people" data-dismiss="modal"class="btn btn-default">提交</button></form>

js代码:

  1 获取已选中的名字并放到数组中

  var name_list = [];

  $("input[name='people_name']:checked").each(function(){

    name_list.push($(this).val)

});

  2 利用ajax向后台传递form表单数据

  $(".select_people").submit(function(event){

    event.preventDefault();  // 阻止默认表单的action功能

    var name_list = [];

    $("input[name='people_name']:checked").each(function(){

      name_list.push($(this).val)

    });

    data = {'id': 1, 'names': name_list};

    $.ajax({

    url: "task_mgm/********",

    type: "POST",

    data: JSON.stringify(data),

    contentType: "application/json",  //发送到后台的数据格式

    data_type: "json",  // 接收后端返回的数据格式

    success: function(resp){

      if (resp.error == "OK"){ console.log('分享成功') }

      else { console.log('分享失败') }

    }

  });

})

python后台代码:

 1 @task_mgm.route('/taskinfo_share_people', methods=['POST', 'GET'])
 2 @login_required
 3 def taskinfo_share_people_fun():
 4     datas = request.get_json()
 5     task_id = datas.get('id')
 6     sharePeopleList = datas.get('names')
 7     print(sharePeopleList)
 8     task = ShareTask()
 9     if len(sharePeopleList) > 0:
10         task.taskId = task_id
11
12         sharePeopleList = list(set(sharePeopleList))  # 去重
13         sharePs = ','.join(sharePeopleList)
14         task.sharePeopleTo = sharePs
15         task.sharePeopleFrom = current_user.name
16         db.session.add(task)
17         db.session.commit()
18         return jsonify(error='OK', emsg="True")
19     else:
20         return jsonify(error='NO', emsg="False")

View Code

转载于:https://www.cnblogs.com/We612/p/10361726.html

前端获取checkbox复选框的值 通过数组形式传递相关推荐

  1. jQuery 循环获取checkbox复选框的值,checkbox全选、全不选、反选

    前端页面html <tr v-for="(log,index) in logList"><!-- v-bind:value绑定 --><td>& ...

  2. layui复选框怎么取值_layui如何获取checkbox复选框的值

    layui如何获取checkbox复选框的值 发布时间:2020-10-21 17:07:09 来源:亿速云 阅读:164 作者:Leah 本篇文章给大家分享的是有关layui如何获取checkbox ...

  3. checkbox取值 php_php获取checkbox复选框的内容

    由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. 复选二 复选三 复选 ...

  4. js获取checkbox复选框获取选中的选项

    分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数. js实现: var form = document. ...

  5. layui复选框怎么取值_layui获取checkbox复选框值

    获取layui表单复选框已选中的数据 HTML layui.form.checkbox 获取选中 复选框 开关关 开关开 立即提交 JS layui.use('form', function(){ v ...

  6. layui表格复选框赋值,获取表格复选框选中值,表格复选框回选

    layui获取表格复选框提交/回选 表格JS table.render({elem: '#app-from',id: 'app-from',url: '/plm/api/employee/listBy ...

  7. jQuery获取input复选框的值

    var ipResolveValue =[]; //定义一个空数组 $("input[name='ipResolve']:checked").each(function(){   ...

  8. 如何获取如何获取datagrid复选框的值_未定事件簿泪之约定如何获取-未定事件簿泪之约定获取技巧...

    未定事件簿泪之约定如何获取?未定事件簿清新可爱的游戏画面,同学在玩游戏的过程中视觉上感受也十分的舒适.未定事件簿中大部分的游戏信息都需要萌新自己去了解!想知道的小同学赶快来和天空游戏下载站编辑一起看一 ...

  9. 如何获取如何获取datagrid复选框的值_火影忍者博人传木叶丸获取方法详解 博人传木叶丸如何获取...

    火影忍者手游博人传木叶丸如何获取,相信很多玩家都不是很了解,那么具体的获取方法是什么呢,同时技能强度如何呢,下面小编给大家带来了详细的攻略内容,一起来看看吧. 火影忍者手游博人传木叶丸获取方法 距离策 ...

  10. 前端判断checkbox复选框是否被选中

    $('#元素id').is(':checked') 判断方法: if($('#元素id').is(':checked')){         alert(1);     }else{          ...

最新文章

  1. 《Windows网络与通信程序设计(第3版)》——1.4 网络应用程序设计基础
  2. c++新特性11 (10)shared_ptr六”构造函数unique_ptr参数“
  3. EasyUI中ToolTip提示框的简单使用
  4. 写代码的16个好习惯,减少80%的bug
  5. java keysetview,Set——你真的了解吗?
  6. python的颜色有哪些_Python颜色分类及格式
  7. Datawhale-零基础入门NLP-新闻文本分类Task02
  8. leetcode - 264. 丑数 II
  9. 热力图怎么做_LncRNA这么热,5分左右的LncRNA研究文章应该怎么做
  10. 在infoWindow中显示Geocode server(地理编码服务)
  11. 关于 html 中 table 表格 tr,td 的高度和宽度
  12. 从零开始做Vue前端架构(2)
  13. RMAN 学习过程之四,备份演练进阶篇
  14. 无刷直流电机反电动势过零检测_TI电机库源码
  15. 算法基础:NP完全问题
  16. Android 加壳App Demo
  17. 传说中的ACM大牛们
  18. 绕过IceSword文件检测的Trojan.Win32.Mnless.zpc/ojj6erv.sys
  19. diy 文件服务器,文件服务器diy
  20. 关于socket传输图片

热门文章

  1. web安全day22:linux系统最基本知识最常用操作和命令
  2. 异常处理和代码复用在python自动化运维中的使用(eNSP模拟器)
  3. PIM DM技术原理与实验
  4. Pyshark获取data-text-lines字段的值
  5. Python3安装核心价值观包报错
  6. 如何实现不同vlan,不同网关的终端间的通信
  7. SpringCloud之 Feign的简单使用
  8. github本地库及clone常用命令
  9. 三问百度云,ABC如何帮它跑赢马拉松?
  10. scala trait 另一种用法类混入