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

    http://blog.csdn.net/lmj623565791/article/details/50709663: 本文出自:[张鸿洋的博客] 一.概述 随着Android 6.0发布以及普及,我 ...

  2. java中的静态分派和动态分派

    多态是java的基本特征之一,多态即一个对象具有多种形态(多种表达形式,猴子是动物的一种的表现形式),例如:子类是父类的一种形态. 当方法重载时,就会涉及到多态. 1:在重载时是通过参数的静态类型,而 ...

  3. MySQLdb使用批量插入executemany方法插入mysql

    python的MySQLdb库可以使用批量操作executemany,进行多行插入. 比如向user表(username,salt,pwd)插入数据,具体的sql语句如下: sql = 'INSERT ...

  4. Deep learning与Neural Network

    深度学习是机器学习研究中的一个新的领域,其动机在于建立.模拟人脑进行分析学习的神经网络,它模仿人脑的机制来解释数据,例如图像,声音和文本.深度学习是无监督学习的一种. 深度学习的概念源于人工神经网络的 ...

  5. Flask之flask-script模块使用

    Flask Script扩展提供向Flask插入外部脚本的功能,包括运行一个开发用的服务器,一个定制的Python shell,设置数据库的脚本,cronjobs,及其他运行在web应用之外的命令行任 ...

  6. 64位win2003/win2008系统IIS6.0/7.5配置PHP的方法

    64位win2003/win2008系统IIS6.0/7.5配置PHP的方法 32位的win2003系统配置PHP,估计很多人都已经驾轻就熟了,不过当遇到64位的系统时,估计又会遇上新的问题了.本文记 ...

  7. 移动端web开发 尽量哪些标签 常用标签及注意事项

    H5手机移动端WEB开发资源整合 常用的标签及注意事项: https://blog.csdn.net/u012118993/article/details/56023399 移动前端不得不了解的htm ...

  8. windows 常用cmd命令

    为了减少使用鼠标的频次,熟记一些常用应用的快捷键与系统本身常用的命令是必须的,以下记录一些常用的windows系统命令. 查看网络端口占用情况 :netstat -ano | findstr 8080 ...

  9. 使用IDEA 创建Servlet 的时候,找不到javax.servlet

    使用IDEA 开发工具,创建Servlet 文件的时候,出现了下面的这种错误, 解决步骤如下: 第一步:点击 File 第二步:找到Project Structure,点击,然后按照下图顺序操作,添加 ...

  10. iOS 动态调用方法

      - (void)bugly { dispatch_async(dispatch_get_global_queue(0, 0), ^{ if (NSClassFromString(@"Bu ...