JQuery获取指定元素中的checkbox选中状态的一些属性
项目中用户上传病例数据,每一次上传自动生成一个病例文件夹,数据保存到后台,前端显示文件夹,现在的需求是勾选想要删除的文件夹的chenckbox,点击删除后,数据库和前端都相应的更新。
如果是静态页面,直接根据id或者class定位到checkbox,然后判断状态,直接remove即可.但是动态页面,需要与后台交互同步,前端相应的文件夹删除,后台数据库也要删除文件夹内的数据,每一个病例文件夹对应数据库的一个recordId,那么问题是,如何知道当前checkbox选中的文件夹对应的病例id(文件夹是动态生成的,如果文件夹数量是固定得,直接按照静态页面的方法获取就行了),项目中用到的是flask框架,见下图:

<ul class="divall">
{%for record in records%}
{%if current_user==user%}
<li class="pat_li">
<input type="text" class="pat" value="{{record.title}}" onfocus="rename(this)" onblur="blur_supervise(this)" readonly/>
<button class="btn_name_ok glyphicon glyphicon-ok" onclick="ok_name()"></button>
<button class="btn_name_remove glyphicon glyphicon-remove" onclick="remove_name(this)"></button>
<ul class="pat_assist">
<li ><input type="button" class="btn_img_icon" > <img id={{record.id}} src={{ url_for('static', filename='images/Dia_mng/delete_icon.png') }} onclick=del_record(this)></input></li>
<li ><a href="{{url_for('main.history_list',type=dia_type,record_id=record.id)}}"><button class="btn_img_icon"><img src={{ url_for('static', filename='images/Dia_mng/icon_hiy.png') }}></button></a></li>
<li > <a href="{{ url_for('main.record_diagnosis',record_id=record.id,record_type=dia_type) }}"><button class="btn_img_icon"><img src={{ url_for('static', filename='images/Dia_mng/icon_dia.png') }}></button></a></li>
</ul>
<input type="checkbox" class="chkFolder">
<a href="{{ url_for('main.record_diagnosis',record_id=record.id,record_type=dia_type) }}"></a >
</li>
{% endif %}
{% endfor %}
</ul>
如图所示代码,第2行3行是flask的循环语句,意思是根据数据库的病例id的length来循环生成<li>标签.....li标签包裹的是一个文件夹的模板,那么如何确定第13行当前勾选的checkbox,所对应的病例id,从而进行删除后台数据库?解决办法是修改代码:
<input type="checkbox" class="chkFolder" id={{record.id}}>
将record in records 的每一项的record id赋值给input的id属性,然后遍历所有checkbox选取为true的元素,获取到id属性,放入数组中,也就是病例id的数组,然后通过ajax传给后台 刷新页面:
var channel=[];
//divall内所有type为checkbox的且选中的元素
var a=$('.divall input[type=checkbox]:checked').each(function()
{//获取id加入数组
if ($.inArray(jQuery(this).attr("id"), channel)==-1) {
channel.push(jQuery(this).attr("id"));
}
});
checkbox的属性为true或者false,但是通过jQure获得的true的值为checked。获得了id然后通过ajax传递给后台。
var record_check = {
"records_id":channel,
"dia_type":"{{ dia_type }}",
}
$.ajax({
type : "post",
url : "/delete_records",
data : JSON.stringify(record_check),
dataType : 'json',
contentType : "application/json; charset=utf-8",
success : function(data) {
console.log(data.flag);
if(data.flag==1)
window.location.reload();
else {
alert("未成功删除,请选择删除病例");
}
}
});
JQuery获取指定元素中的checkbox选中状态的一些属性的更多相关文章
- 获取不到Repeater控件中的CheckBox选中状态
写在前面的话:在做一个项目的时候,需要使用到Repeater控件,并且在Repeater控件内放置了CheckBox控件来标志需要删除的行,选中后,在后台取到的CheckBox的值总是为false.最 ...
- jQuery获取Select元素
jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Se ...
- html中radio、checkbox选中状态研究(静下心来看,静下心来总结)
html中radio.checkbox选中状态研究(静下心来看,静下心来总结) 一.总结 1.单选框的如果有多个checked 会以最后一个为准 2.js动态添加checked属性:不行:通过 $(& ...
- WPF ListBoxItem模板中添加CheckBox选中问题
原文:WPF ListBoxItem模板中添加CheckBox选中问题 是这样的,需要一个ListBox来展示照片,并添加一个选中的CheckBox.这就需要对ListBox的ItemTemplate ...
- 如何通过源生js获取一个元素的具体样式值 /* getCss:获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */
昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或 ...
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- jquery获取当前元素的坐标
jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或 var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...
- 使用jquery获取父元素或父节点的方法
今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...
- jquery获取html元素的绝对位置和相对位置
jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:绝对位置坐标:$("#elem").offset().top$("#elem").offs ...
随机推荐
- 网络爬虫之scrapy框架详解
twisted介绍 Twisted是用Python实现的基于事件驱动的网络引擎框架,scrapy正是依赖于twisted, 它是基于事件循环的异步非阻塞网络框架,可以实现爬虫的并发. twisted是 ...
- 新手怎么读懂一个中型的Django项目
[前言]中型的项目是比较多的APP,肯会涉及多数据表的操作.如果有人带那就最好了,自己要先了解基本的django框架(MTV ,ORM等)师傅可以给讲解一下框架怎么组织url.py,model.py, ...
- K-medodis聚类算法MATLAB
国内博客,上介绍实现的K-medodis方法为: 与K-means算法类似.只是距离选择与聚类中心选择不同. 距离为曼哈顿距离 聚类中心选择为:依次把一个聚类中的每一个点当作当前类的聚类中心,求出代价 ...
- php 计算gps坐标 距离
在计算机或GPS上经纬度经常用度.分.秒和度.度.分.分.秒.秒的混合方式进行表示,度.分.秒间的进 制是60进制,度.度.分.分. 秒.秒的进制是100进制,换算时一定要注意.可以近似地认为每个纬度 ...
- 02-django查询
目录 (一)查询 1 .基本查询(等于.大于.包含字符.日期.字段比较.逻辑) 2 .关联查询(即为join查询)(一对多.多对多.一对一) 3 .聚合查询(统计查询) (二)关联对象(已知A表的 ...
- 使用selenium
1.安装谷歌浏览器 2.安装谷歌浏览器驱动 3.安装selenium包 4.测试 1.安装谷歌浏览器 2.安装谷歌浏览器驱动 打开 http://blog.csdn.net/huilan_ ...
- sqlserver表结构查询语句
SELECT syscolumns.name,systypes.name,syscolumns.isnullable,syscolumns.length FROM syscolumns, systyp ...
- 17.如何网页发起QQ聊天
1.被发起的QQ需要再QQ推广开启QQ在线状态http://shang.qq.com/v3/widget.html 2.html代码 <html> <head></hea ...
- HMM、MEMM、CRF模型比较和标注偏置问题(Label Bias Problem)
本文转自:http://www.cnblogs.com/syx-1987/p/4077325.html 路径1-1-1-1的概率:0.4*0.45*0.5=0.09 路径2-2-2-2的概率:0.01 ...
- FFmpeg 入门(1):截取视频帧
本文转自:FFmpeg 入门(1):截取视频帧 | www.samirchen.com 背景 在 Mac OS 上如果要运行教程中的相关代码需要先安装 FFmpeg,建议使用 brew 来安装: // ...