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绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jquery实现拖拽小方块效果
Dec 10 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
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
php 获取本地IP代码
2013/06/23 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
python实现的简单猜数字游戏
2015/04/04 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Django框架封装外部函数示例
2019/05/28 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python 实现目录复制的三种小结
2019/12/04 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
python中可以声明变量类型吗
2020/06/18 Python
序列化Python对象的方法
2020/08/01 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
客服服务心得体会
2013/12/30 职场文书
初中音乐教学反思
2014/01/12 职场文书
最新创业融资计划书
2014/01/19 职场文书
软件项目开发计划书
2014/05/01 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
解除劳动合同协议书
2014/09/17 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS