jQuery实现checkbox全选、反选及删除等操作的方法详解


Posted in jQuery onAugust 02, 2019

本文实例讲述了jQuery实现checkbox全选、反选及删除等操作的方法。分享给大家供大家参考,具体如下:

运行效果:

jQuery实现checkbox全选、反选及删除等操作的方法详解

1.list.html

说明:用checkbox数组Check[]存放每一行的ID值

<div id="con">
 <table width="100%" cellspacing="1" cellpadding="0">
 <tr>
  <th><input id="CheckAll" name='CheckAll' type='checkbox'></th>
  <th>ID</th>
  <th>Name</th>
  <th>Date</th>
 </tr>
 <tr>
  <td><input id='Check[]' name='Check[]' type='checkbox' value="1"></td>
  <td>10001</td>
  <td>XXX</td>
  <td>2015-12-01</td>
 </tr>
 <tr>
  <td><input id='Check[]' name='Check[]' type='checkbox' value="2"></td>
  <td>10002</td>
  <td>XXX</td>
  <td>2015-12-02</td>
 </tr>
 <tr>
  <td><input id='Check[]' name='Check[]' type='checkbox' value="3"></td>
  <td>10003</td>
  <td>XXX</td>
  <td>2015-12-03</td>
 </tr>
</table>
<div id="bottom">
 <input id="Delete" name="Delete" type="button" value=" 删 除 " class="btn btn-danger radius"/>
</div>
</div>

2.功能:全选/全不选

说明:如果需要这里还可以根据选择结果显示/隐藏【删除】等按钮

//全选/全不选
 $("#CheckAll").bind("click",function(){
  $("input[name='Check[]']").prop("checked",this.checked);
  //显示删除按钮
  /*if(this.checked == true){
    $("input[name='Delete'").css("display",'block');
  }else{
    $("input[name='Delete'").css("display",'none');
  }*/
 });

3.功能:批量删除

说明:需注意的是在传值的的时候,要把获取的数组checkData转化成字符串checkData.toString()

//批量删除
$("#Delete").click(function(){
 if(confirm('确定要删除所选吗?')){
   var checks = $("input[name='Check[]']:checked");
   if(checks.length == 0){ alert('未选中任何项!');return false;}
   //将获取的值存入数组
   var checkData = new Array();
   checks.each(function(){
    checkData.push($(this).val());
   });
   $.get("<{spUrl c=order a=delete}>",{Check:checkData.toString()},function(result){ if(result = true){ window.location.reload();}});
   }
 }
});

实际应用中往往不仅仅只有批量删除一个操作,通常还有其它的批量操作,我们可以对上面代码优化整合一下,将通用的功能放在一个文件中。

通用文件:jquery.ready.js

说明:因为这一部分较为通用可以放在一个公共的js文件里面,获取checkbox值可以写成一个变量函数

//获取被选中checkbox值
var checked = function(){
 var checks = $("input[name='Check[]']:checked");
 if(checks.length == 0){ alert('未选中任何项!');return false;}
 var checkData = new Array();
 checks.each(function(){
   checkData.push($(this).val());
 });
 return checkData;
};
//全选/全不选
$("#CheckAll").bind("click",function(){
  $("input[name='Check[]']").prop("checked",this.checked);
  //显示删除按钮
  /*if(this.checked == true){
   $("input[name='Delete'").css("display",'block');
  }else{
   $("input[name='Delete'").css("display",'none');
  }*/
});

list.js

//批量删除
$("#Delete").click(function(){
 if(val = checked()){
   if(confirm('确定要删除所选吗?')){
    $.get("<{spUrl c=order a=delete}>",{Check:val.toString()},function(result){ if(result = true){ window.location.reload();}});
   }
 }
});
//批量操作...

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
详解jquery和vue对比
Apr 16 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 #jQuery
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
jQuery中DOM操作原则实例分析
Aug 01 #jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
jquery.pager.js分页实现详解
Jul 29 #jQuery
jquery.pager.js实现分页效果
Jul 29 #jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 #jQuery
You might like
短波的认识
2021/03/01 无线电
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
php简单统计中文个数的方法
2016/09/30 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
深入浅析python继承问题
2016/05/29 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python实现爬山算法的思路详解
2019/04/09 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
药物学专业学生的自我评价
2013/10/27 职场文书
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python