<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. php 内置的 webserver 研究。

    今天,试了一下通过 php5.4.45 内置的webserver , 在Windows XP 上面能够跑起公司的一个项目,完全无压力.哈哈,只要一个php 就可以,不需要 Apache , Nginx ...

  2. iframe载入等待

    <style> #pageloading{position:absolute; left:0px; top:0px;background:white url('../images/load ...

  3. UITableView表格操作

    UITableView[表格视图] UITableView是表格视图,是UIScrollView的子类,非常重要. 一.表格视图常用属性 1.基本属性方法 创建一个tableView //    UI ...

  4. particles.js 一个非常酷炫的粒子动画库

    GIT 地址:https://github.com/VincentGarreau/particles.js/ 效果:

  5. javascript open window

    参数 | 取值范围 | 说明alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended ...

  6. 转发:iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控

    -- iOS事件全面解析 转载来自崔江涛(KenshinCui) 链接:http://www.cnblogs.com/kenshincui/p/3950646.html 概览 iPhone的成功很大一 ...

  7. A/C模式 是什么意思啊汽车知识问题_PCauto快问

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  8. svn + jenkins + maven 实现java环境的自动化构建和部署

    1. 环境说明: 系统CentOS 7 x64 IP:  10.6.0.126 1.1 首先安装配置 svn Centos 7  通过yum 安装svn 既可, 版本为1.7.14 # yum -y ...

  9. Linux系统目录

    [root@localhost ~]# ls /bin dev home lost+found misc opt root selinux sys usrboot etc lib media net ...

  10. (中等) POJ 2948 Martian Mining,DP。

    Description The NASA Space Center, Houston, is less than 200 miles from San Antonio, Texas (the site ...