前端获取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复选框值的方法 ...
随机推荐
- Hdu 3001 Travelling 状态DP
题目大意 一次旅游,经过所有城市至少一次,并且任何一座城市访问的次数不能超过两次,求最小费用 每个城市最多访问两次,用状态0,1,2标识访问次数 把城市1~N的状态按照次序连接在一起,就组成了一个三进 ...
- 页面内容不够高footer始终位于页面的最底部
相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...
- Django---forms表单使用(2)
Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 小试牛刀 1.创建Form类 from dja ...
- LayoutInflater.inflate()方法两个参数和三个参数
转载请标明出处:https://www.cnblogs.com/tangZH/p/7074853.html 很多人都用过LayoutInflater(布局填充器) 对于我来说通常使用下面两种:Lay ...
- Android 反射获取一个方法(方法的参数不一样)
private Method forget; private Method connect_netID; private Method connect_wifiConfig; private Meth ...
- Android Studio Termanal打不开,提示java.io.IOEXception:couldn't create PTY
打开Andorid Studio,点击Terminal提示错误; 如图: 经过一番挣扎,尝试了以下几种 方法一:打开File -> Settings -> Tools -> Ter ...
- JAVA 递归实现从n个数中选取m个数的所有组合
这周Java课程有个小作业:Java递归实现从n个数中选取m个数的所有组合 代码如下: //其中 n 取 1,2,3,4,5 五个数, m 取 3 package javaText; public c ...
- 【记录】Xmind8 Pro 激活
摘要 XMind 是一个全功能的思维导图和头脑风暴软件,为激发灵感和创意而生.作为一款有效提升工作和生活效率的生产力工具,受到全球百千万用户的青睐. [有能力请支持正版] 在xmin下载xmi ...
- LeetCode算法题-Construct String from Binary Tree(Java实现)
这是悦乐书的第273次更新,第288篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第141题(顺位题号是606).构造一个字符串,该字符串由二叉树中的括号和整数组成,并具 ...
- java中 & ^ ~ 的运算
java运算符 与(&).非(~).或(|).异或(^) 最近看HashMap源码,遇到了这样一段代码: 1 static final int hash(Object key) { 2 i ...