前端获取checkbox复选框的值 通过数组形式传递
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复选框的值 通过数组形式传递的更多相关文章
- Web版需求征集系统所得1,servlet中获取checkbox复选框的值
servlet中获取checkbox复选框的值 </tr> <tr> <td align="right">研究类型</td> < ...
- 获取checkbox复选框的值
<title>CheckBox</title> <script type = "text/javascript"> doGetVal: func ...
- php获取checkbox复选框的内容
php获取checkbox复选框的内容 由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...
- php怎么获取checkbox复选框的内容?
由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...
- js获取checkbox复选框获取选中的选项
js获取checkbox复选框获取选中的选项 分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数.js实现 ...
- layui获取checkbox复选框值
获取layui表单复选框已选中的数据 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- jQuery获取input复选框的值
var ipResolveValue =[]; //定义一个空数组$("input[name='ipResolve']:checked").each(function(){ / ...
- 使用js获取复选框的值,并把数组传回后台处理,过程使用的是Ajax异步查询
这是界面代码: function shua(){ var id_array=new Array(); $('input[id="checkAll& ...
- php checkbox复选框值的获取与checkbox默认值输出方法
php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...
随机推荐
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- [总结]WEB前端开发常用的CSS/CSS3知识点
css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...
- 安卓手机如何快速投屏到windows(10/8.1/7)电脑上
前提: 手机和电脑连接的网络必须在同一局域网下. 优势: 手机和电脑不需要下载对应平台的应用,完全使用全系统自带功能. 附加: 以下演示是安卓手机和windows操作系统电脑,并且win10和win1 ...
- FormData 对象上传二进制文件
使用jQuery 利用 FormData 上传文件:http://harttle.com/2016/07/04/jquery-file-upload.html 通过FormData对象可以组装 ...
- SpringMVC从认识到细化了解
目录 SpringMVC的介绍 介绍: 执行流程 与strut2的对比 基本运行环境搭建 基础示例 控制器的编写 控制器创建方式: 请求映射问题: 获取请求提交的参数 通过域对象(request,re ...
- vue实现打印功能的两种方法
第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 安装好以后在main.js文件中引入 import Print from 'v ...
- 【公众号系列】两分钟学会SAP F1技巧
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[公众号系列]两分钟学会SAP F1技巧 写 ...
- c/c++ 网络编程 使用getaddrinfo的单纯UDP 通信
网络编程 使用getaddrinfo的单纯UDP 1,UDP发送端 2,UDP接收端 UDP发送端: #include <stdio.h> #include <unistd.h> ...
- Java中console类的简单用法
Java.io.Console 只能用在标准输入.输出流未被重定向的原始控制台中使用,在 Eclipse 或者其他 IDE 的控制台是用不了的. import java.io.Console; pub ...
- C# groupby 应用小技巧
这两天感冒了,导致大脑无法有效运转,一个朋友问我,groupby 怎么给list 分组,然后再将其中一个字段组合起来,恩,觉得很简单,结果才发现,自己的脑子真的是不够用了: 恩,其实是想写其他的,但是 ...