项目中用户上传病例数据,每一次上传自动生成一个病例文件夹,数据保存到后台,前端显示文件夹,现在的需求是勾选想要删除的文件夹的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选中状态的一些属性的更多相关文章

  1. 获取不到Repeater控件中的CheckBox选中状态

    写在前面的话:在做一个项目的时候,需要使用到Repeater控件,并且在Repeater控件内放置了CheckBox控件来标志需要删除的行,选中后,在后台取到的CheckBox的值总是为false.最 ...

  2. jQuery获取Select元素

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...});   //为Se ...

  3. html中radio、checkbox选中状态研究(静下心来看,静下心来总结)

    html中radio.checkbox选中状态研究(静下心来看,静下心来总结) 一.总结 1.单选框的如果有多个checked 会以最后一个为准 2.js动态添加checked属性:不行:通过 $(& ...

  4. WPF ListBoxItem模板中添加CheckBox选中问题

    原文:WPF ListBoxItem模板中添加CheckBox选中问题 是这样的,需要一个ListBox来展示照片,并添加一个选中的CheckBox.这就需要对ListBox的ItemTemplate ...

  5. 如何通过源生js获取一个元素的具体样式值 /* getCss:获取指定元素的具体样式的属性值 curElement:[dom对象] attr:[string] */

    昨天的博客些的真的是惨不忍睹啊!!!但是我的人生宗旨就是将不要脸的精神进行到底,所以,今天我又来了.哈哈哈哈哈! 方法一:元素.style.属性名:(这个有局限性--只能获取行内样式的值,对于样式表或 ...

  6. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  7. jquery获取当前元素的坐标

    jquery获取当前元素的坐标 1,获取对象 var obj = $("#id号"); 或  var obj = $(this); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗 ...

  8. 使用jquery获取父元素或父节点的方法

    今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...

  9. jquery获取html元素的绝对位置和相对位置

    jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:绝对位置坐标:$("#elem").offset().top$("#elem").offs ...

随机推荐

  1. freemarker学习#1

    在工作的过程中遇到了.ftl文件.打开发现里面是一些类似于html的代码,非常好奇这是一种什么样的文件,于是去网上搜了一下,了解到.ftl是Freemarker模板的文件后缀名.将问题转移到了Free ...

  2. socket编程之obj压缩加密传输

    因为需要序列化这个对象以便在网络上传输.所以POJO必需要实现java.io.Serializable接口.使用了 ObjectInputStream和ObjectOutputStream来接收和发送 ...

  3. https通讯原理

    https通讯原理 HTTPS在传输数据之前需要客户端(浏览器)与服务端(网站)之间进行一次握手,在握手过程中将确立双方加密传输数据的密码信息.TLS/SSL协议不仅仅是一套加密传输的协议,更是一件经 ...

  4. python web框架 django 添加环境变量

    C:\Users\Administrator.QH-20170325TNQR\AppData\Local\Programs\Python\Python36\Scripts把环境变量加上 可以在本地执行 ...

  5. 在android上跑 keras 或 tensorflow 模型

    https://groups.google.com/forum/#!topic/keras-users/Yob7mIDmTFs http://talc1.loria.fr/users/cerisara ...

  6. Oracle记录登录失败的触发器

    前言:实现的功能主要是,oracle登录成功记录登录用户ip地址,登录失败记录登录失败ip地址 1,需要建立一个触发器记录登录成功的客户端用户的ip地址 大家都知道在v$session 中记录着客户端 ...

  7. XDU 1098 (欧拉函数模板题)

    原题链接,点击此处 欧拉函数:φ(N)表示对一个正整数N,欧拉函数是小于N且与N互质的数的个数 通式:φ(x) = x(1-1/p1)(1-1/p2)(1-1/p3)(1-1/p4)…..(1-1/p ...

  8. Maven详解(转)

    原文出自: http://www.cnblogs.com/hongwz/p/5456578.html http://ifeve.com/maven-1/ Maven介绍: Maven是一个强大的Jav ...

  9. 学习Android开发看那些书好?

    学习一样新事物或许有多种方式,报培训班,看视频,向高手请教等等,但一本好书往往可以让你少走很多弯路,事半功倍. 下面推荐几本个人觉得搞Android开发值得一读的书籍. Head First Java ...

  10. ACM-ICPC 2018 沈阳赛区网络预赛 J. Ka Chang (树分块)

    题意:一个树,支持两种操作:1.将深度为L的节点权置加上X;2.求以x为根节点的子树上节点权置之和.根节点深度为0. 分析:考虑用树状数组维护节点权置,按dfs序下标查询.记录每个深度节点的个数.如果 ...