前端获取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复选框值的方法 ...
随机推荐
- EditPlus提示错误:找不到或无法加载主类
问题:EditPlus提示错误:找不到或无法加载主类. 原因:换了另外一台电脑,忘了什么时候,环境变量被误删了. 解决问题: 1.检查文件名和public修饰的类名是否一致. 2.文件查看时,有没有隐 ...
- Kruskal重构树入门
这个知识点好像咕咕咕了好长了..趁还没退役赶紧补一下吧.. 讲的非常简略,十分抱歉.. 前置知识 Kruskal算法 一定的数据结构基础(如主席树) Kruskal重构树 直接bb好像不是很好讲,那就 ...
- thymeleaf的配置
1.在springboto项目中使用thymeleaf标签,必须先添加依赖,如下. <dependency> <groupId>org.springframework.boot ...
- java新知识系列 一
内联函数: 所谓内联函数就是指函数在被调用的地方直接展开,编译器在调用时不用像一般函数那样,参数压栈,返回时参数出栈以及资源释放等,这样提高了程序执行速度. 对应Java语言中也有一个关键字final ...
- Python高级应用(3)—— 为你的项目添加验证码
验证码简介 验证码的作用: 验证码在现在来说,是很常见的东西,可以一定程度的保护网站,比如防止网络爬虫恶意爬取网站数据啊,减少低级的攻击啊什么的.但是高级点的骚操作还是不太好防范,所以现在的验证码平台 ...
- python优雅编程之旅
偶然的机会坐上了python的贼船,无奈只能一步步踏上王者之巅..... 参考博客地址:https://mp.weixin.qq.com/s/OZVT3iFrpFReqdYqVhUf6g 1.交换赋值 ...
- Java - String 的字面量、常量池、构造函数和intern()函数
一.内存中的 String 对象 Java 的堆和栈 对于基本数据类型变量和对象的引用,也就是局部变量表属于栈内存: 而通过 new 关键字和 constructor 创建的对象存放在堆内存: 直接的 ...
- hashlib模块
老师博客:http://www.cnblogs.com/Eva-J/articles/7228075.html#_label12 摘要算法 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个 ...
- 进程间数据传递:Queue,Pipe 进程间数据共享:Manager
1.使用multiprocessing模块的Queue实现数据传递 ''' 进程间通讯: Queue,用法跟线程里的Queue一样,put,get 线程queue没有做序列化,进程queue做序列化了 ...
- Windows 版 SourceTree 免登录跳过初始设置的方法
首先去官网下载最新的sourcetree安装包,点击打开下载地址. 下载完成后安装,等到他自启动开始提示你登录的时候,打开“我的电脑(此电脑)”,在最上边的输入栏输入%LocalAppData%\At ...