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 相关文章推荐
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
easyui Draggable组件实现拖动效果
Aug 19 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
微信小程序实现点击页面出现文字
Sep 21 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
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
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
21行Python代码实现拼写检查器
2016/01/25 Python
python保存文件方法小结
2018/07/27 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
科级干部考察材料
2014/02/15 职场文书
建筑安全责任书范本
2014/07/24 职场文书
九寨沟导游词
2015/02/02 职场文书
党小组推荐意见
2015/06/02 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
小学毕业教师寄语
2019/06/21 职场文书