<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. 【iOS开发-72】设置状态栏的两种方式、程序生命周期以及更好地理解几大类（对象）之间的关系

    (1)设置状态栏的2种方式 --第一种方式就是我们在控制器中设置,系统默认就是交给视图控制器去管理的,这样不同视图控制器能够自己定义不同的状态栏例如以下: -(BOOL)prefersStatusBa ...

  2. c语言，指针与数组--指针与二维数组2

    指向一维数组的指针   char (*p)[10] ;指向一维数组的指针类型 typedef  char(*TYPE_P2ARRAY)[10]  ;   该指针可以指向数组 ,且使用起来效果节本相同, ...

  3. 用c#开发微信(10) JSSDK 基本用法 分享接口“发送到朋友”

    微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享. ...

  4. France '98

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=30506#problem/H #include<map> #include&l ...

  5. Hadoop学习之HBase

    1. HBase有哪些基本的特征? 2. HBase相对于关系数据库能解决的问题是什么? 3. HBase的数据模型是什么?如何表述?有哪些操作形式? 4. HBase的模式Schema设计的一些概念 ...

  6. [置顶] Windows Phone后台音乐详解一

    应用于: Windows Phone 8 | Windows PhoneOS 7.1 你可以为winphone编写在后台播放音乐的app.这表示即使当用户点击返回或开始按钮离开你的应用界面时,你的应用 ...

  7. Good Bye 2013---B. New Year Present

    New Year Present time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  8. shadow dom

    初识shadow dom 我们先看个input="range"的表现: what amazing ! 一个dom能表现出这么多样式嘛? 无论是初学者和老鸟都是不肯相信的,于是在好奇 ...

  9. Python写入文件，但是发现文件为空，竟然未写入！

    问题描述: fw=open(r'C:\test.txt','w') s="Hello World!" fw.write(s) ========== 此时查看C盘根目录,发现test ...

  10. 节点地址的函数list_entry()原理详解

    本节中,我们继续讲解,在linux2.4内核下,如果通过一些列函数从路径名找到目标节点. 3.3.1)接下来查看chached_lookup()的代码(namei.c) [path_walk()> ...