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 tools之tabs 选项卡/页签
Jul 25 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
javascript入门教程基础篇
Nov 16 Javascript
JSONObject使用方法详解
Dec 17 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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遍历数组的方法汇总分析
2013/06/08 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Vue中全局变量的定义和使用
2019/06/05 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
React实现todolist功能
2020/12/28 Javascript
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
查看Django和flask版本的方法
2018/05/14 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
python 解决函数返回return的问题
2020/12/05 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
苹果中国官方网站:Apple中国
2016/07/22 全球购物
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
委托公证书范本
2014/04/03 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
供电工程专业求职信
2014/08/09 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python