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 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 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上传文件问题汇总
2015/01/30 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python 变量类型及命名规则介绍
2013/06/08 Python
详解python配置虚拟环境
2019/04/08 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python timeit模块原理及使用方法
2020/10/10 Python
python 利用toapi库自动生成api
2020/10/19 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
Sony C++笔试题
2013/03/10 面试题
linux面试题参考答案(7)
2014/07/24 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
小学教育毕业生自荐信
2013/11/18 职场文书
五一手机促销方案
2014/03/08 职场文书
实践单位评语
2014/04/26 职场文书
老公保证书范文
2014/04/29 职场文书
介绍信怎么写
2015/05/05 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
如何写新闻稿
2015/07/18 职场文书
运动会开幕式致辞
2015/07/29 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
python基础入门之字典和集合
2021/06/13 Python
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js