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 ...
随机推荐
- oracle建表设置主键自增
首先创建一张表 create table member( memberId number primary key, memberMail )not null, memberName ) not nul ...
- 已经安装好了的lamp或者lnmp环境,编译其他的模块进来?
问题: 如何为已经编译好了的环境再次编译其他的模块? 方法: 一般分为两种情况: 1. php的源码安装包中本来就有这个 .so 的扩展,我们只需要进入到php的安装源码包中的ext文件夹下,然后找到 ...
- linux文件编程----系统调用
linux中文件编程可以使用两种方法: 1).linux系统调用 2).C语言库函数 前者依赖于linux系统,后者与操作系统是独立的. 在 linux系统中,所有打开的文件也对应一个数字,这个数字由 ...
- Hadoop RPC实例
本文发表于本人博客. 上次写了个hadoop伪分布环境搭建的笔记了,今天来说下hadoop分布式构建的基础RPC,这个RPC在提交Job任务的时候底层就是创建了RPC来实现远程过程调用服务端. 我们首 ...
- XDU 1111
对于一排n个正方形,有f(n)种方案达成目标,若第n个块是白色,则有f(n-1)种方案,若第n个块是黑色,则第n-1个块必为白色,那么有f(n-2)+n-2种方案. 则f(n)=f(n-1)+f(n- ...
- 高并发下hystrix熔断超时及concurrent.RejectedExecutionException: Rejected command because thread-pool queueSize is at rejection threshold问题
我的一个项目并发200+,观察服务器的日志发现出现了大量的熔断超时偶尔会闪现出RejectedExecutionException: Rejected command because thread-p ...
- appium不同姿势安装
一 桌面版(打开很慢,常用于辅助元素定位) 1.官网下载window版本: 2.直接点击图标即可打开
- Docker+.Net Core 的那些事儿-4.还有这种操作!?
1.通过docker run -v命令映射工作目录 通过一系列上述操作,我们可以发现我们的发布是基于镜像的,也就是说,在后期的迭代过程中,如果有些代码修改,我们就不得不删除旧的容器和镜像,dotnet ...
- $ 一步一步学Matlab(3)——Matlab中的数据类型
小学时候我们就知道,数学中有自然数.整数.分数.小数等等很多种类型的数.到了中学,我们又发现了其实还有无理数.复数这些有些特殊的数.到了大学学了高等数学之后,我们又知道了其实还存在着无穷大.无穷小这样 ...
- laravel 图片上传 ajax 方式
laravel 图片上传 //后台轮播图上传 $("#img-upload").on('submit',function(e){ e.preventDefault(); var f ...