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

 更新时间:2019年08月02日 10:38:56   作者:大江echor  
这篇文章主要介绍了jQuery实现checkbox全选、反选及删除等操作的方法,结合实例形式形式详细分析了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表格(table)操作技巧汇总》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结

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

相关文章

  • myeclipse安装jQuery插件的方法

    myeclipse安装jQuery插件的方法

    以下为myeclipse安装jQuery插件的安装步骤,需要的朋友可以参考下。
    2011-03-03
  • Validform+layer实现漂亮的表单验证特效

    Validform+layer实现漂亮的表单验证特效

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的。本文就给大家结合2款优秀的插件来实现这个问题,有需要的小伙伴可以参考下
    2016-01-01
  • jQuery滚动插件scrollable.js用法分析

    jQuery滚动插件scrollable.js用法分析

    这篇文章主要介绍了jQuery滚动插件scrollable.js用法,简单分析了scrollable.js的功能、方法及相关使用技巧,需要的朋友可以参考下
    2017-05-05
  • 初步认识JavaScript函数库jQuery

    初步认识JavaScript函数库jQuery

    这篇文章主要介绍了JavaScript函数库jQuery的一些基本概念,包括其的添加方法和最基本的使用示例,需要的朋友可以参考下
    2015-06-06
  • jquery实现文本框的禁用和启用

    jquery实现文本框的禁用和启用

    本文主要介绍了jquery实现文本框的禁用和启用,代码清晰,有需要的朋友可以参考下,希望会对大家有所帮助
    2016-12-12
  • jquery 模板的应用示例

    jquery 模板的应用示例

    模板的使用在jqery中还是比较广泛的,在本文有个不错的示例,大家可以参考下
    2013-11-11
  • jquery之empty()与remove()区别说明

    jquery之empty()与remove()区别说明

    要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。
    2010-09-09
  • jquery实现图片按比例缩放示例

    jquery实现图片按比例缩放示例

    这篇文章主要介绍了通过jquery实现图片按比例缩放,需要的朋友可以参考下
    2014-07-07
  • jQuery实现下拉加载功能实例代码

    jQuery实现下拉加载功能实例代码

    本文通过一段实例代码给大家介绍jquery实现下拉加载功能,代码简单易懂,需要的朋友参考下吧
    2016-04-04
  • jQuery的Ajax用户认证和注册技术实例教程(附demo源码)

    jQuery的Ajax用户认证和注册技术实例教程(附demo源码)

    这篇文章主要介绍了jQuery的Ajax用户认证和注册技术,结合完整实例较为详细的分析讲解了jQuery中ajax方法实现用户验证与注册的相关技巧与注意事项,并附带了demo源码供读者下载,需要的朋友可以参考下
    2015-12-12

最新评论