<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. vm10虚拟机安装Mac OS X10.10教程

    VM10装Mac OS X 10.9.3及更新到Mac OS X 10.10,让你的windows也能玩Swift .  最近WWDC放出终极大招——新的编程语言Swift(雨燕),导致一大波程序员的 ...

  2. CodeForces 510E Fox And Dinner

    网络流. 原点到偶数连边,容量为2, 奇数到汇点连边,容量为2, 偶数到与之能凑成素数的奇数连边,容量为1 如果奇数个数不等于偶数个数,输出不可能 如果原点到偶数的边不满流,输出不可能 剩下的情况有解 ...

  3. 关于textarea的应用--onchage,onpropertychange,oninput

    oninput,onpropertychange,onchange的用法 1.onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对 ...

  4. ARM裸机开发中内存管理库RT_HEAP的使用

    在使用arm芯片进行裸机开发的时候,很多时候都需要内存管理的功能,我们可以使用自己写的内存管理程序,也可以直接使用标准库,不过我一般比较喜欢标准库,速度快,今天就来说说在C语言环境下怎么样进行内存的动 ...

  5. android gridview画分割线

    dongyangzhang android gridview画分割线,如图: 1.先上图: 2.具体实现代码: public class LineGridView extends GridView { ...

  6. (中等) HDU 3265 Posters , 扫描线。

    Problem Description Ted has a new house with a huge window. In this big summer, Ted decides to decor ...

  7. [转]解决Maven报错"Plugin execution not covered by lifecycle configuration"

    [转]解决Maven报错"Plugin execution not covered by lifecycle configuration" 导入Myabtis源码后,POM文件会报 ...

  8. 最小化安装Linux记录

    挂载点: /boot 挂载点  100M swap 交换分区 / 根分区 最小化安装: 基本--基本.兼容库.调试工具 开发--开发工具 修改hostname 永久设置:/etc/sysconfig/ ...

  9. Matlab笔记

    提取RGB分量,并显示出来 rgb=imread('mao.jpg'); rgb_r=rgb(:,:,); rgb_g=rgb(:,:,); rgb_b=rgb(:,:,); zero=zeros(, ...

  10. myeclipse的常用快捷键

    创建一个类 Alt+Shift+N,C,输入Demo,回车 创建类属性 按3次下方向键,回车,输入String name;,回车 创建构造器 Alt+Shift+S,O,回车 创建getter/set ...