<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. 【Cocos2d-x】截图分享功能

    Cocos2d-x截图实现 图片将会保存在data/data/包名/files文件夹下. Android下分享一张图片 linux系统下的文件权限 普通情况下android下的每个应用程序都是一个独立 ...

  2. 使用内容提供者和xml备份联系人

    1.通过内容提供者获取联系人信息 package com.ithaimazyh.readcontact; import java.util.ArrayList; import java.util.Li ...

  3. 修改OpenSSL默认编译出的动态库文件名称

    在 Windows 平台上调用动态链接库 dll 文件时,有两种方式:a) 隐式的加载时链接:使用 *.lib (导入库)文件,在 IDE 的链接器相关设置中加入导入库 lib 文件的名称,或在程序中 ...

  4. hdu4431 Mahjong

    Mahjong Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  5. 【学习opencv第六篇】图像的反转操作

    考试终于完了,现在终于有时间可以继续学习这个了.写这篇博客主要是因为以前一直搞不清楚图像数据到底是怎么存储的,以及这个step到底是什么,后来查了一下才知道原来step就是数据行的长度.. #incl ...

  6. KMP算法 KMP模式匹配 一（串）

    A - KMP模式匹配 一(串) Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:131072KB  ...

  7. BaseActivity--上门啦

    package com.fwpt.activity; import com.fwpt.entity.RyUserInfo; import com.fwpt.entity.SmlaUserinfo; i ...

  8. Hadoop 2.x从零基础到挑战百万年薪第一季

    鉴于目前大数据Hadoop 2.x被企业广泛使用,在实际的企业项目中需要更加深入的灵活运用,并且Hadoop 2.x是大数据平台处理 的框架的基石,尤其在海量数据的存储HDFS.分布式资源管理和任务调 ...

  9. MFC 关于对话框的注意点

    1.对于模态对话框而言,单击确定以后对话框窗口对象即被销毁了,而对于非模态对话框来说,对话框的对象并未销毁而是隐藏起来(EndDialog函数),因此对于非模态对话框,必须重写OnOK这个虚函数,并在 ...

  10. jquery特效 幻灯片效果

    jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...