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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
Javascript 实现匿名递归的实例代码
May 25 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
node.js中的require使用详解
2014/12/15 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
Python批量按比例缩小图片脚本分享
2015/05/21 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
Python实现壁纸下载与轮换
2020/10/19 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
电气自动化大学生求职信
2013/10/16 职场文书
参观监狱心得体会
2014/01/02 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript