<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. c++11 新特性之 autokeyword

    C++11是对眼下C++语言的扩展和修正.C++11包含大量的新特性:包含lambda表达式,类型推导keywordauto.decltype,和模板的大量改进. g++编译c++11命令加上 -st ...

  2. hdu1334-Perfect Cubes

    http://acm.hdu.edu.cn/showproblem.php?pid=1334 题意;求200以内所有满足a^ 3 == b^ 3 + c ^ 3 +d ^ 3 #include< ...

  3. COCOS2D-X之圆形进度条的一个简单Demo

    这应该是游戏中很常见的一个效果.显示某个事件的进度等,在加载资源或者联网的时候经常用到.所以有必要学习学习 一.我们直接在COCOS2D-X自带的HelloCpp的工程中添加代码即可.我们在初始化中添 ...

  4. 基于visual Studio2013解决面试题之0905子串数量

     题目

  5. JQuery获取与设置HTML元素的值value

    JQuery获取与设置HTML元素的值value 作者:简明现代魔法图书馆 发布时间:2011-07-07 10:16:13 20481 次阅读 服务器君一共花费了13.221 ms进行了6次数据库查 ...

  6. 日积月累：ScrollView嵌套ListView只显示一行

    在开发的过程当中,由于手机屏幕的大小的限制,我们经常需要使用滑动的方式,来显示更多的内容.在最近的工作中,遇见一个需求,需要将ListView嵌套到ScrollView中显示.于是乎有了如下布局: & ...

  7. JS firebug小技巧

    实际上前端的发展与进步也离不开浏览器的支持,而对于开发者来讲,浏览器最好的支持,就是对于debug的良好支持,甚至在某些兴许接手的项目中,前端的debug甚至能够解决好多问题--不说了,都是泪啊!还是 ...

  8. Android播放音乐时跳动的屏谱demo

    Android实现播放音频时的跳动频谱,并实现可以调节的均衡器. Main.java package com.wjq.audiofx; import android.app.Activity; imp ...

  9. [Cocos2d-x开发问题-3] cocos2dx动画Animation介绍

    Cocos2d-x为了减少开发难度,对于动画的实现採用的帧动画的方案.这也就是说Cocos2d-x中的动画是帧动画. 帧动画的原理相信大家都不陌生,就是多张图片循环播放以实现动画的效果. 一个简单的动 ...

  10. jdbcType与javaType的对应关系

    java.sql.Types 值 Java 类型 IBM DB2 Oracle Sybase SQL Informix IBM Content Manager BIGINT java.lang.lon ...