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 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
Javascript事件实例详解
Nov 06 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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扩展
2013/06/13 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
js实现简单的打印表格
2020/01/15 Javascript
vue实现购物车列表
2020/06/30 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
python assert的用处示例详解
2019/04/01 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
英文版销售经理个人求职信
2013/11/20 职场文书
单位婚育证明范本
2014/11/21 职场文书
创业计划书之酒厂
2019/10/14 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers