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. 关于token和refresh token

    最近在做公司的认证系统,总结了如下一番心得. 传统的认证方式一般采用cookie/session来实现,这是我们的出发点. 1.为什么选用token而不选用cookie/session? 本质上tok ...

  2. Djiango初识

    加载静态文件 在一个网页中,不仅仅只有一个 html 骨架,还需要 css 样式文件, js 执行文件以及一些图片 等.因此在 DTL 中加载静态文件是一个必须要解决的问题.在 DTL 中,使用 st ...

  3. offic|集成|协同OA|移动办公|

    随着互联网时代的日新月异,移动通讯技术的飞速发展,移动网络技术的更新换代,手机.平板电脑等移动设备越来越智能化.越来越多样化,人们对移动办公的需求也在日益增长.在此背景下北京博信施科技有限公司自主研发 ...

  4. 作为开发人员,这四类Code Review方法你都知道吗?

    本文翻译自:https://dzone.com/articles/4-types-of-code-reviews-any-professional-developer 转载请注明出处:葡萄城官网,葡萄 ...

  5. po编程——自动化测试面试必问

    先来看一个在腾讯课堂首页搜索机构的操作步骤: 1:首先打开腾讯课堂的首页:https://ke.qq.com 2:点击课程或机构的下拉选择图标 3:选择机构 4:在搜索框输入要搜索的机构名称 5:点击 ...

  6. 实现MongoDB读写分离的“读偏好”介绍

    在某些情况下,将读请求发送给副本集的备份节点是合理的,例如,单个服务器无法处理应用的读压力,就可以把查询请求路由到可复制集中的多台服务器上.现在绝大部分MongoDB驱动支持读偏好设置(read pr ...

  7. Linux中逻辑卷的快照与还原

    有关逻辑卷的其他操作,请看: Linux中对逻辑卷的建立 Linux中对逻辑卷进行扩容与缩小 Linux中对逻辑卷的移除 LVM还有快照的功能,类似windows的系统还原点.其特点: 1.快照卷的容 ...

  8. C#中Windows窗体工具栏

    标签(Label):用于显示用户不能编辑的文本或图像.常使用它对窗体上的其他各种控件进行标注或说明. 文本框(TextBox):用于获取用户名输入的信息或向用户显示的文本. 组合框(ComboBox) ...

  9. 创建你的第一个Composer/Packagist包

    今天我们要介绍一下如何通过Composer和Packagist向PHP社区贡献代码包.首先,如果你是一个PHP开发者但是还不知道什么是Composer,请先参考了一下这篇文章http://docs.p ...

  10. 数据流中的第k大元素的golang实现

    设计一个找到数据流中第K大元素的类(class).注意是排序后的第K大元素,不是第K个不同的元素. 你的 KthLargest 类需要一个同时接收整数 k 和整数数组nums 的构造器,它包含数据流中 ...