关于jquery全选反选 批量删除的一点心得
废话不多说直接上代码:
下面是jsp页面的html代码:
<table id="contentTable" class="">
<thead>
<tr>
<th><input type="checkbox" id="All" value="全选/全不选" />全选/全不选</th>
</tr>
</thead>
<tbody>
<c:forEach items="${page.list}" var="advAdvertisement">
<tr>
<td><input type="checkbox" value="${advAdvertisement.id}" name="checkbox" class="checkbox"/></td>
</tr>
</c:forEach>
</tbody>
</table>
然后是jquery:
$(document).ready(function(){ $('#All').change(function(){ if($('#All').attr('checked')){ $('.checkbox').attr('checked',true); }else{
$('.checkbox').removeAttr('checked');
} });
});
代码简单明了,相信聪明的你一看就懂。
最后是批量删除选中的复选框数据:
<input id="btnSubmit" class="" onclick="deleteAll();" type="button" value="批量删除"/> <script type="text/javascript"> function deleteAll(){
if(confirm('确认要删除选中的广告吗?')==true){ var obj=document.getElementsByName('checkbox'); //选择所有name="'test'"的对象,返回数组
//取到对象数组后,我们来循环检测它是不是被选中
var s=new Array();
for(var i=0; i<obj.length; i++){
if(obj[i].checked){
s[i]=obj[i].value;
} //如果选中,将value添加到数组s中
}
//那么现在来检测s的值就知道选中的复选框的值了
alert(s==''?'你还没有选择任何内容!':s);
alert(s);
$.ajax({
type:'POST',
url:'${ctx}/adv/advAdvertisement/deleteAll',
data:{'ids':s},
traditional:true,
dataType:'text',
success:function(data){alert('删除成功!')}
});
window.location.href="";
}
}
</script>
批量删除的时候需要去获取每一个被选中的复选框的id,我们用一个数组把他们存起来,最重要的一点,是要在$.ajax中配置traditional:true这个属性,如果不配置后台controller是不认可的。
后台接收的话直接用一个String[] ids数组接收就可以得到关于id的一个数组了,然后for循环尽情的做你想做的一切吧!
批量删除的话用 where in 语句比较合适:
<update id="deleteAll" parameterType="java.util.Arrays"> UPDATE test_data SET
del_flag = 1
where id in <foreach item="idItem" collection="array" open="(" separator=","
close=")"> #{idItem} </foreach> </update>
关于jquery全选反选 批量删除的一点心得的更多相关文章
- angularJS 全选反选批量删除
<th> <label for="flag"> <span ng-hide="master">全选</span> ...
- php--jquery操作全选、批量删除、加减行
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
- jQuery全选反选插件
(function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...
- jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- jquery全选 反选
//全选 反选 $('#chkAll').on('click',function(){ $('input.chkbox').prop('checked',$(this).prop('checked') ...
- jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
随机推荐
- Linux环境g++编译TinyXML动态库
除了CMarkup,tinyxml也是C/C++下解析XML很好的工具.在linux下用g++编译tinyxml的步骤如下(tinyxml版本2.6.2): 进入tinyxml解压目录,用文本编辑器打 ...
- 【Python 函数对象 命名空间与作用域 闭包函数 装饰器 迭代器 内置函数】
一.函数对象 函数(Function)作为程序语言中不可或缺的一部分,但函数作为第一类对象(First-Class Object)却是 Python 函数的一大特性. 那到底什么是第一类对象(Firs ...
- 这 5 个前端组件库,可以让你放弃 jQuery UI
欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 在建立Web应用时,通常都需要用到一些有用的UI组件.无论应用中需要的是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么 ...
- docker - 关于network的一些理解
docker 提供给我们多种(4种)网络模式,我们可以根据自己的需求来使用.例如我们在一台主机(host)或者同一个docker engine上面运行continer的时候,我们就可以选择bridge ...
- 多线程编程-- part 5.3 LockSupport
一.LockSupport的介绍 LockSupport是用来创建锁和其他同步类的基本线程阻塞原语. LockSupport中的park() 和 unpark() 的作用分别是阻塞线程和解除阻塞线程 ...
- javaSE_06Java中的数组(array)-提高练习
1.求1!+2!+3!+···+30!的和,定义一个方法 public class Test1{ public static void main(String[] args){ //1.求1!+2!+ ...
- javaSE_Java第一周总结:有难度题目集合
第一周练习总结 说明:尽量采用多种做法解决 1.使用三种方法实现变量交换 public class Test1Change{ public static void main(String[] args ...
- eclipse maven项目中使用tomcat插件部署项目
maven的tomcat插件部署web项目,我简单认为分两种,一种是部署到内置tomcat,另一种是部署到安装的tomcat. 第一种部署,默认是部署在内置tomcat的8080端口,如果不需要改端口 ...
- iHover – 30+ 纯 CSS3 实现的超炫的图片悬停特效
iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建(包括文件),便于修改变量.有模块化的代码, ...
- JavaScript事件与例子
事件,就是预先设置好的一段代码,等到用户触发的时候执行. 一:常见的事件: 1.关于鼠标的事件 onclick 鼠标单击触发 ondblclick 鼠标双击触发 onmouseover 鼠标移上触发 ...