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 相关文章推荐
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
修改file按钮的默认样式实现代码
Apr 23 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
PHP 登录记住密码实现思路
2013/05/07 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
React优化子组件render的使用
2019/05/12 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
Python中转换角度为弧度的radians()方法
2015/05/18 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
24式加速你的Python(小结)
2019/06/13 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
毕业实习评语
2014/02/10 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL