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为表单动态添加节点内容的方法
Feb 10 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
Vue2.0权限树组件实现代码
Aug 29 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
基于iview的router常用控制方式
May 30 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 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
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
2016/11/09 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
python下MySQLdb用法实例分析
2015/06/08 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
使用python3实现操作串口详解
2019/01/01 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
中职应届生会计求职信
2013/10/23 职场文书
买房子个人收入证明
2014/01/16 职场文书
揭牌仪式主持词
2014/03/19 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
出国留学自荐信模板
2015/03/06 职场文书
创卫工作总结2015
2015/04/22 职场文书
教师远程培训心得体会
2016/01/09 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js