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 相关文章推荐
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
angularJS 入门基础
Feb 09 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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
虫族 ZERG 概述
2020/03/14 星际争霸
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
python的mysqldb安装步骤详解
2017/08/14 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
10个示例带你掌握python中的元组
2020/11/23 Python
Python使用tkinter实现小时钟效果
2021/02/22 Python
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
村级换届选举方案
2014/05/10 职场文书
司法助理专业自荐书
2014/06/13 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
工作检讨书500字
2014/10/19 职场文书
2014年实验室工作总结
2014/12/03 职场文书
异地恋情人节寄语
2015/02/28 职场文书
企业计划生育责任书
2015/05/09 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
python如何将mat文件转为png
2022/07/15 Python