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获取url参数的使用扩展实例
Dec 29 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
JS扩展方法实例分析
Apr 15 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
如何手写简易的 Vue Router
Oct 10 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的宝库目录--PEAR
2006/10/09 PHP
php 抽象类的简单应用
2011/09/06 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
JS中如何实现复选框全选功能
2016/12/19 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
Python入门篇之字典
2014/10/17 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
小学清明节活动总结
2014/07/04 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers