jQuery 全选 全不选 事件绑定的实现代码


Posted in Javascript onJanuary 23, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<td width="82%" colspan="3">
<input type="checkbox" id="all">全选     
<input type="checkbox" id="reverse">反选
</td>
<td width="82%" colspan="3">
<s:checkboxlist name="resUuids" list="resList" listKey="uuid" listValue="name"></s:checkboxlist>
</td>
$(function(){
//全选
$("#all").click(function(){
//将下面所有组件全部选中
//$("[name=resUuids]")  是多个组件,整体是个对象数组
//$("[name=resUuids]").attr("checked","checked");
//先获取当前组件的状态
//$(this).attr("checked")
//将所有组件设置为对应状态
//$("[name=resUuids]").attr("checked",$(this).attr("checked"));
//$(this).attr("checked")获取的值究竟是什么
//alert($(this).attr("checked"));    //undefined
//$("[name=resUuids]").attr("checked","undefined");
//js语法规则,除了false,FALSE,"false","FALSE",0五个值之外的所有值,认定为true
//$("[name=resUuids]").attr("checked",false);
var flag = $(this).attr("checked");
$("[name=resUuids]").attr("checked",flag == "checked");
});
//反选
    $("#reverse").click(function(){
      //将所有组件的状态切换成原始状态的反状态
      //$("[name=resUuids]").attr("checked",!($("[name=resUuids]").attr("checked")=="checked"));
      //当选择器选中的组件是多个时,获取组件的任何数据都是对第一个组件进行操作
      //alert(!($("[name=resUuids]").attr("checked")=="checked"));
      //对每个组件进行迭代,让其操作状态为对应组件的原始状态的反状态
      $("[name=resUuids]").each(function(){
        //使用each操作实现对每个组件的操作
        var flag = $(this).attr("checked"); 
        $(this).attr("checked", !(flag =="checked"));
      });
      checkSelect();
    });
//绑定组件
    $("[name=resUuids]").click(function(){
      //将全选的状态设置为基于所有组件的综合状态值
      checkSelect();
    });
    function checkSelect(){
      var allFlag = true;
      $("[name=resUuids]").each(function(){
        var flag = $(this).attr("checked") == "checked";
        //&:位运算与   &&:逻辑与
        allFlag = allFlag && flag; 
      });
      $("#all").attr("checked",allFlag);
    }
  });

以上所述是小编给大家介绍的jQuery 全选 全不选 事件绑定的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 #Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 #Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 #Javascript
利用JS实现简单的日期选择插件
Jan 23 #Javascript
获取IE浏览器Cookie信息的方法
Jan 23 #Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 #Javascript
原生和jQuery的ajax用法详解
Jan 23 #Javascript
You might like
php 获取完整url地址
2008/12/20 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
js实现3D旋转相册
2020/08/02 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python中optparser库用法实例详解
2018/01/26 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python进度条的制作代码实例
2019/08/31 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
全民健身日活动方案
2014/01/29 职场文书
环保证明
2015/06/23 职场文书
自书遗嘱范文
2015/08/07 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
MySQL学习必备条件查询数据
2022/03/25 MySQL