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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
js切换光标示例代码
Oct 10 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 Javascript
微信小程序实现拍照和相册选取图片
May 09 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快速url重写更新版[需php 5.30以上]
2010/04/25 PHP
PDO::setAttribute讲解
2019/01/29 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
TensorFlow的权值更新方法
2018/06/14 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
奶茶店创业计划书范文
2014/01/17 职场文书
七年级音乐教学反思
2014/01/26 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
《绝招》教学反思
2016/02/20 职场文书