<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. [转] Eclipse 使用 Link 方式进行插件的安装

    下方来自 http://www.iteye.com/topic/1113353 Eclipse 的插件安装方法一般有以下几种(以安装 SVN 插件为例说明,Eclipse 版本为:3.7/Indigo ...

  2. ubuntux下apk反编译工具安装

    1,下载dex2jar工具.(http://download.csdn.net/detail/u013647453/8286693) 2,下载jd-gui工具(http://jd.benow.ca/) ...

  3. iOS开发——获取当前屏幕显示的viewcontroller

    获取当前屏幕显示的viewcontroller,然后想怎么跳就怎么跳. - (UIViewController *)getCurrentVC { UIViewController *result = ...

  4. iOS透明引导页

    一.效果展示 这里写图片描述 这种类型的新手引导比较常见,用于告诉用户某个按钮的作用,或者提醒用户可以进行某种交互操作.引导样式是在界面上加了一个半透明的引导图,高亮部分就是要突出的区域 二.怎么做? ...

  5. enum的java例子

    Grade.java package com.zhiyuan.myenum; /** * <p>Title: 枚举类 * <p>Company: * @description ...

  6. 关于Java通过JNI调用C 动态链接库(DLL)

    JNI介绍 用JNI实现Java和C语言的数据传递 JNI原理分析和详细步骤截图说明 jni的JNIEnv指针和jobject指针 JNI实现回调| JNI调用JAVA函数|参数和返回值的格式 Jni ...

  7. 全方位分析Objcetive-C Runtime

    本文详细整理了 Cocoa 的 Runtime 系统的知识,它使得 Objective-C 如虎添翼,具备了灵活的动态特性,使这门古老的语言焕发生机.主要内容如下: 引言 简介 与Runtime交互 ...

  8. 已知从BUF开始存放了10个字类型有符号数据,编程求出这10个数中的最大数和最小数(将最大数存入MAX字单元、最小数存入MIN字单元),并将其以10进制数的形式在屏幕上显示出来。

    data segment            pmax db 0dh,0ah , 'MAX :   ','$'    pmin db 0dh,0ah , 'MIN :   ','$'    buf ...

  9. diff命令参数

    diff命令参数: diff - 找出两个文件的不同点 总览 diff [选项] 源文件 目标文件 描述 在最简单的情况是, diff 比较两个文件的内容 (源文件 和 目标文件). 文件名可以是 - ...

  10. java 位操作的总结

    2014-05-07 17:14 今天工作上需要一个Byte的低5位,高3位.所以查询了资料.总结下如何实现 百度到一个资料: 介绍的很详细 基础知识: http://www.blogjava.net ...