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 相关文章推荐
javascript中的对象创建 实例附注释
Feb 08 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
javascript的理解及经典案例分析
May 20 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
深入apache host的配置详解
2013/06/09 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
解决Vue router-link绑定事件不生效的问题
2020/07/22 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python 文件读写操作实例详解
2014/03/12 Python
python 创建弹出式菜单的实现代码
2017/07/11 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python实现tail -f 功能
2020/01/17 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
什么是网络协议
2016/04/07 面试题
小学教师岗位职责
2013/11/25 职场文书
买房子个人收入证明
2014/01/16 职场文书
服装店营销方案
2014/03/10 职场文书
房屋委托书范本
2014/04/04 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
预备党员综合考察材料
2014/05/31 职场文书
中药学自荐信
2014/06/15 职场文书
2015年资料员工作总结
2015/04/25 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书