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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
生成卡号php代码
2008/04/09 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
PHP return语句的另一个作用
2014/07/30 PHP
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Python读取表格类型文件代码实例
2020/02/17 Python
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
请说出以下代码输出什么
2013/08/30 面试题
县级文明单位申报材料
2014/05/23 职场文书
收款委托书范本
2014/09/11 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
党员违纪检讨书
2015/05/05 职场文书
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
部分武汉产收音机展览
2022/04/07 无线电
Python&Matlab实现樱花的绘制
2022/04/07 Python