Jquery 全选反选实例代码


Posted in Javascript onNovember 19, 2015

本文给大家分享一段基于jQuery的全选、反选和不选功能的代码,适用于网页多选后需要进行批量操作的场景(如批量删除等)。文章结合实例,代码简洁,基本覆盖选项选择操作的方方面面,希望可以帮到有需要的WEB爱好者。

//全选 全不选

$('#checkAll').click(function () {
  //判断是否被选中
  var bischecked = $('#checkAll').is(':checked');
  var fruit = $('input[name="check"]');
  bischecked ? fruit.attr('checked', true) : fruit.attr('checked', false);
 });

//反选   遍历checkbox 如果当前为选中 就设置为 不选中 反之相同

$("#tabVouchList tr").each(function () {
  if ($("td:eq(0) input[name='check']", $(this)).is(':checked')) {
   $(this).attr('checked', false);
  } else {
   $(this).attr('checked', true);
  }
 });

 HTML table

<table id="tabVouchList">
 <tr>
  <th>
   <input type="checkbox" name="checkAll" />
  </th>
  <th>
   行号
  </th>
  <th>
   名称
  </th>
 </tr>
 <tr>
  <td>
   <input type="checkbox" name="check" />
  </td>
  <td>
   行号
  </td>
  <td>
   名称
  </td>
 </tr>
</table>

以上代码就是jquery实现全选全不选反选的全部代码,代码是不是很简单啊,希望对大家工作学习有所帮助。

Javascript 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 #Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 #Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 #Javascript
javascript实现二级级联菜单的简单制作
Nov 19 #Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 #Javascript
javascript中checkbox使用方法实例演示
Nov 19 #Javascript
jquery实现表格隔行换色效果
Nov 19 #Javascript
You might like
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
PHP pear安装配置教程
2016/05/14 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
2017/08/08 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
仿京东快报向上滚动的实例
2017/12/13 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
采购内勤岗位职责
2013/12/10 职场文书
超越自我演讲稿
2014/05/21 职场文书
应用外语系自荐信
2014/06/26 职场文书
交通事故协议书范文
2014/10/23 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
大学生创业计划书
2019/06/24 职场文书