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后台代码:

 @task_mgm.route('/taskinfo_share_people', methods=['POST', 'GET'])
@login_required
def taskinfo_share_people_fun():
datas = request.get_json()
task_id = datas.get('id')
sharePeopleList = datas.get('names')
print(sharePeopleList)
task = ShareTask()
if len(sharePeopleList) > 0:
task.taskId = task_id sharePeopleList = list(set(sharePeopleList)) # 去重
sharePs = ','.join(sharePeopleList)
task.sharePeopleTo = sharePs
task.sharePeopleFrom = current_user.name
db.session.add(task)
db.session.commit()
return jsonify(error='OK', emsg="True")
else:
return jsonify(error='NO', emsg="False")

前端获取checkbox复选框的值 通过数组形式传递的更多相关文章

  1. Web版需求征集系统所得1,servlet中获取checkbox复选框的值

    servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> < ...

  2. 获取checkbox复选框的值

    <title>CheckBox</title> <script type = "text/javascript"> doGetVal: func ...

  3. php获取checkbox复选框的内容

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

  4. php怎么获取checkbox复选框的内容?

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

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

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

  6. layui获取checkbox复选框值

    获取layui表单复选框已选中的数据 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  7. jQuery获取input复选框的值

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

  8. 使用js获取复选框的值,并把数组传回后台处理,过程使用的是Ajax异步查询

    这是界面代码: ​ function shua(){             var id_array=new Array();         $('input[id="checkAll& ...

  9. php checkbox复选框值的获取与checkbox默认值输出方法

    php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...

随机推荐

  1. CentOS下RabbitMq高可用集群环境搭建

    准备工作 1,准备两台或多台安装有rabbitmq-server服务的服务器 我这里准备了两台,分别如下: 192.168.40.130 rabbitmq01192.168.40.131 rabbit ...

  2. 聊聊我的 Java 自学之路

    最近经常在知乎收到类似『没基础,java 如何自学』.『怎么才能掌握编程』等等问题,再加上发现高中同学也在自学.有感而发,讲讲我的自学之路. 1.1. 大学 高考没正常发挥,考入一所二流的学校,当时分 ...

  3. Flask 系列之 优化项目结构

    说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 完善环境配置,添加 异常请求 处理 实现 400.404 ...

  4. 【代码笔记】Web-CSS-CSS Border(边框)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. DIV中文字换行显示

    居然第一次遇到这种问题,还想了半天到底是怎么回事,为什么明明div设置宽度了,里面的文字超过宽度后居然不换行. (1)word-break属性,可以让浏览器实现在任意位置换行. normal:使用浏览 ...

  6. IBM Watson启示录:AI不应该仅仅是炫技

    IBM Watson启示录:AI不应该仅仅是炫技 https://mp.weixin.qq.com/s/oNp8QS7vQupbi8fr5RyLxA                         导 ...

  7. 混用Int与IntPtr导致GetProcAddress始终返回null

      注意NET某些类型在不同平台上的长度 NET中用句柄用得最多的是在DLLIMPORT中,混用int与intptr可能会导致某些API声明在X64平台中表现不正常,如 [DllImport(&quo ...

  8. win10的react native 开发环境搭建,使用Android模拟器

    1.打开cmd的管理员模式,win+X,选择命令提示符(管理员)即可,运行如下命令: @"%SystemRoot%\System32\WindowsPowerShell\v1.0\power ...

  9. bootstrap-treeview 在 bootstrap 4 不兼容解决办法及使用

    bootstrap-treeview 是bootstrap的一个树形插件,插件依赖: bootstrap/3.3.7 jquery/3.3.1 经过验证,它不可以在 bootstrap 高于 3.3. ...

  10. 【自动化测试&爬虫系列】Selenium Webdriver

    文章来源:公众号-智能化IT系统. 一. Selenium Webdriver技术介绍 1. 简介 selenium Webdriver是一套针对不同浏览器而开发的web应用自动化测试代码库.使用这套 ...