<td width="82%" colspan="3">
<input type="checkbox" id="all">全选&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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 全选 全不选 事件绑定的更多相关文章

  1. jquery 选择器、筛选器、事件绑定与事件委派

    一.jQuery简介 1.可用的jQuery服务器网站:https://www.bootcdn.cn/ jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocume ...

  2. jQuery使用(七):事件绑定与取消,及自定事件的实现原理

    实例方法: on() one() off() trigger() hover() 一.绑定事件与jQuery事件委托 $(selector).eventType(fn); $(selector).on ...

  3. jquery的链式操作以及事件绑定

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery(十二);事件绑定

    一.bind() bing()用来绑定事件,例如: 二.unbind() unbind()用来解除事件的绑定.例如: 三.on() on()方法用来绑定事件,例如: 四.off() off()方法用来 ...

  5. 转:jQuery事件绑定.on()简要概述及应用

    前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除了, ...

  6. 【JQuery源码】事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...

  7. jQuery-1.9.1源码分析系列(十) 事件系统——事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...

  8. jQuery/javascript实现全选全不选

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  9. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  10. Jquery 遍历 Table;遍历CheckBox ;遍历Select;全选/全不选

    关于Jquery:相信大家已经很熟悉了,我最近的项目运用到关于Jquery的遍历事件:权当总结下: 遍历Table <table  id="thistab"> < ...

随机推荐

  1. 【HighCharts系列教程】七、导出属性——exporting

    一.exporting属性说明 默认情况下,HighCharts支持将图表导出为图片或打印功能的.也就是在图表的右上角有两个按钮.打击即可进行相应的操作. 实现导出和打印功能需要引入相应的js文件,也 ...

  2. Lua打印Table的数据结构工具类

    --这是quick中的工具,作用就是打印Lua中强大的table的结构, 当table的嵌套层级比较多的时候,这个工具非常方便,开发中必备的工具. --具体使用方法:local debug = req ...

  3. JQuery实现仿腾讯的固定导航栏

    1.描述 窗口滚动一定高度之后才让导航栏固定 2.要点 浏览器滚动的事件:$(window).scroll(functiuon(){ 文档滚过的高度: $(doucment).scrollTop(); ...

  4. PHP 领域模型与数据库映射文章

    1. http://blog.csdn.net/happen_zhang/article/details/12761747 2. http://blog.csdn.net/hguisu/article ...

  5. ZooKeeper 的安装和配置---单机和集群

    如题本文介绍的是ZooKeeper 的安装和配置过程,此过程非常简单,关键是如何应用(将放在下节及相关节中介绍). 单机安装.配置: 安装非常简单,只要获取到 Zookeeper 的压缩包并解压到某个 ...

  6. Java语言的学习

    众所周知,Java是上个世纪的语言产物,到现在已经有多个分支,Java和OC.Swift一样都是面向对象的语言,目前学习Java是想接触一下后台的开发,当然iOS也不会丢掉,毕竟多学一点不是坏事. 今 ...

  7. LWIP裸机环境下实现TCP与UDP通讯

    前面移植了LWIP,并且简单的实用了DHCP的功能,今天来使用一下实际的数据通讯的功能 首先是实现TCP客户端,我先上代码 #ifndef __TCP_CLIENT_H_ #define __TCP_ ...

  8. Mac搭建Hadoop源码阅读环境

    1.本次Hadoop源码阅读环境使用的阅读工具是idea,Hadoop版本是2.7.3.需要安装的工具包括idea.jdk.maven.protobuf等 2.jdk,使用的版本是1.8版,在jdk官 ...

  9. coreGraphs和动画

    http://www.jianshu.com/p/b71c3d450e8e http://blog.csdn.net/volcan1987/article/details/9969455 http:/ ...

  10. mysql root密码

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...