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 相关文章推荐
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
javascript实现简单留言板案例
Feb 09 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 读取文件的正确方法
2009/04/29 PHP
php购物车实现方法
2015/01/03 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
Python制作简易注册登录系统
2016/12/15 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
Python pandas常用函数详解
2018/02/07 Python
python 以16进制打印输出的方法
2018/07/09 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
询价采购方案
2014/06/09 职场文书