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 ...
随机推荐
- Win32 配置文件用法
#include "stdafx.h"#include <Shlobj.h>#include <Shlwapi.h> #pragma comment(lib ...
- Ignite缓存管理初体验
Ignite缓存管理初体验:ignite服务端配置,大家可以用参考官方进行配置(或者使用默认配置也可以). 本文中的ignite使用版本是1.7,与spring结合使用.maven依赖配置 ignit ...
- Linux登录欢迎图案
命令提示符设置: export PS1='\n\[\e[37;1m[\]\[\e[31;1m\]\u\[\e[39;1m\]@\[\e[33;1m\]\H \[\e[34;1m\]\w\[\e[37; ...
- Oracle DB 使用RMAN将数据库移植到ASM存储区
1. 完全关闭数据库. 2. 关闭数据库并修改服务器参数文件,以使用Oracle Managed Files (OMF). 3. 编辑并执行以下RMAN 脚本: STARTUP NOMOUNT; RE ...
- java通过url抓取网页数据
在很多行业中,要对行业数据进行分类汇总,及时分析行业数据,对于公司未来的发展,有很好的参照和横向对比.所以,在实际工作,我们可能要遇到数据采集这个概念,数据采集的最终目的就是要获得数据,提取有用的数据 ...
- Django中contenttype的应用
content_type表将app名称与其中的表的关系进行保存 通过下边的示例来理解content_type的具体应用: models: from django.db import models fr ...
- CCF 交通规划(Dijkstra+优先队列)
交通规划 问题描述 G国国王来中国参观后,被中国的高速铁路深深的震撼,决定为自己的国家也建设一个高速铁路系统. 建设高速铁路投入非常大,为了节约建设成本,G国国王决定不新建铁路,而是将已有的铁路改造成 ...
- 在Idea中连接数据库并生成实体类(mybatis逆向生成实体类)
1.连接数据库 (1)按下图 , 点击view-----选择tool windows----------选择database并点击 (2)弹出Database窗口 点击加号------------选 ...
- JavaScript-dom4 date string 事件绑定
内置date <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- android线程学习心得
有一篇关于android线程讲的非常好,大家可以参考下,其中有一句话讲的非常好,就拿来做开篇之句: 当一个程序第一次启动时,Android会同时启动一个对应的主线程(Main Thread),主线程主 ...