<html>
  <head>

  <script type='text/javascript' src='js/jquery-1.5.1.js'></script>

  <script type='text/javascript'>

    $(document).ready(function(){

   $('#handle').click(function(){

     if($(this).attr('checked')==true){

   $('.toggle').attr('checked','true');

   }

  else{

   $('.toggle').removeAttr('checked');

   }

   });

   $('.toggle').click(function(){

     if($('.toggle:checked').length==$('.toggle').length){

     $('#handle').attr('checked','true');

     }

  else{

    $('#handle').removeAttr('checked');

    }

  });

 });

  </script> 

  <style type='text/css'>

  ul{

     background-color:#ccc;

  list-style:none;

  margin 20px auto;

  }

  li{

    padding:10px;

 }

  </style>

  </head>

  <body>

    <ul>

   <li>

    <input type='checkbox' id='handle'>

       <label for='handle'>

      <strong> Toggle ALL</strong></label>

  </li>

   <li>

     <input type='checkbox' class='toggle'>

     <label> aaaaaaa</label>

     </li>

   <li>

     <input type='checkbox' class='toggle'>

     <label> bbbbbbb</label>

     </li>

   <li>

     <input type='checkbox' class='toggle'>

     <label> cccccccc</label>

     </li>

   <li>

     <input type='checkbox' class='toggle'>

     <label> ddddddd</label>

     </li>

 </ul>

  </body>

 </html>

jquery中实现全选按钮的更多相关文章

  1. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  2. 列表中checked全选按钮的实现

    用过音乐播放器的人都知道有个全选按钮,如果使用Jquery实现,有个直接选中checked标签的方式 <!DOCTYPE HTML> <html> <head> & ...

  3. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  4. 在jquery中，全选/全不选的表示方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. jquery中的全选、反选、全不选和单删、批删

    HTML页面 <!doctype html><html lang="en"><head> <meta charset="UTF- ...

  6. jquery中的全选，全不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Jquery 组 checkbox全选按钮

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  8. jQuery中关于全选、全不选和反选

    1.首先我们要获取当前点击的对象,然后得到点击事件,   判断他的状态如果是checked的话就把该第二行的选中,   否则就取消选中. 2.当第二列功能小项没有全部选中时,该行第一列的复选款也要取消 ...

  9. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

随机推荐

  1. mysql中IN和EXITS效率

    mysql中的in语句是把外表和内表作hash 连接.而exists语句是对外表作loop循环,每次loop循环再对内表进行查询.一直大家都觉得exists比in语句的效率要高.这样的说法事实上是不准 ...

  2. 【手打】LZW编码的C/C++实现

    LZW编码通过建立一个字符串表,用较短的代码来表示较长的字符串来实现压缩. LZW压缩算法是Unisys的专利,有效期到2003年,所以相关算法大多也已过期. 本代码只完毕了LZW的编码与解码算法功能 ...

  3. I/O操作技术

     对I/O操作有三种可能的技术:可编程I/O.中断驱动I/O.直接内存存取(DMA) 可编程I/O 当处理器正在运行程序并遇到一个与I/O相关的指令时,它通过给对应的I/O模块发命令来运行这个指令 ...

  4. perl 处理perl返回的json

    [root@wx03 ~]# cat a14.pl use Net::SMTP; use LWP::UserAgent; use HTTP::Cookies; use HTTP::Headers; u ...

  5. UPC 2959: Caoshen like math 这就是个水题

    http://acm.upc.edu.cn/problem.php?id=2959 这就是个水题,之所以要写这个题是感觉很有纪念意义 用力看就是盲……23333333333333333 这个题就是最小 ...

  6. Android Gradle Plugin指南（六）——高级构建定制

    原文地址:http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Advanced-Build-Customization ...

  7. Swift - 通过设置视图的transform属性实现动画

    设置视图对象的transform属性,可以实现各种动画效果. 1,移动 指在同一平面内,将控件按照某个直线方向平移一定的距离. 1 2 3 4 5 //每次都从当前位置平移 self.imageVie ...

  8. 怎样在Windows和Linux下写相同的代码

    目前,Linux在国内受到了越来越多的业内人士和用户的青睐.相信在不久的将来,在国内为Linux开发 的应用软件将会有很大的增加(这不,金山正在招兵买马移植WPS呢).由于未来将会是Windows和L ...

  9. Android手势识别（单击 双击 抬起 短按 长按 滚动 滑动）

    对于触摸屏,其原生的消息无非按下.抬起.移动这几种,我们只需要简单重载onTouch或者设置触摸侦听器setOnTouchListener即可进行处理.不过,为了提高我们的APP的用户体验,有时候我们 ...

  10. JS - 6款鼠标悬停效果

    下载地址:http://www.lanrentuku.com/js/tupian-1093.html