<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. ajax动态加载的图标

    http://www.ajaxload.info/ 这个网站可以动态生成ajax加载样式的小图片,git格式,挺不错推荐给大家

  2. 基于visual Studio2013解决C语言竞赛题之1025Bessel函数

          题目 解决代码及点评 /* 功能:25. Bessel函数Jn(X)有以下的递推关系: J[n+1](x)=(2n+1)/x*J[n](x)-J[n-1](x) 并 ...

  3. php导出excel数据

    提供两种导出excel方法 1 最简单的导出excel header('Content-Type: application/vnd.ms-excel'); //设置文件类型   也可以将 vnd.ms ...

  4. oracle逻辑导入小错：提示无法创建日志提示

    ***********************************************声明*************************************************** ...

  5. Swift - 后台获取数据（Background Fetch）的实现

    前面讲了如何让程序申请后台短时运行.但这个额外延长的时间毕竟有限.所以从iOS7起又引入两种在后台运行任务的方式:后台获取和后台通知. 1,后台获取介绍 后台获取(Background Fetch)是 ...

  6. Swift - 使用位运算提取颜色，合并颜色

    通常我们可以使用16进制的格式表示RGB颜色,比如0x2f88c0.通过位操作运算,能很方便的将其中的R,G,B颜色各部分分别提取出来.反之,也可以将R,G,B颜色值组合成一个完整的颜色. 1,提取颜 ...

  7. [置顶] Android下实现自动关机的方法总结

    最近在网上看了一些Android下实现自动关机的方法,有的不行,有的只适用一些机型,有的适用于大部分机型,笔者在此总结一下 法一: Intent newIntent = new Intent(Inte ...

  8. 恭喜我开通了CSDN博客

    准备在这里写点东西,记录我的学习过程....

  9. 在DLL中封装的VCL窗体Tab键响应的问题

    在DLL中的子窗体不会响应Tab按键的,这个时候就需要手动去指定Tab键的操作,但是前提是主窗体要向这个窗体发送一个消息,一个Tab键按下的消息.基本顺序是这样的: 1. 主窗体用Hook技术捕获Ta ...

  10. Android开源框架AsyncHttpClient (android-async-http)使用

    android-async-http 开源框架可以使我们轻松地获取网络数据或者向服务器发送数据,最关键的是,它是异步框架,在底层使用线程池处理并发请求,效率很高,使用又特别简单. 以往我们在安卓上做项 ...