jquery中实现全选按钮

来源:互联网 发布:广州排名优化 编辑:程序博客网 时间:2024/05/18 06:21
<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>

原创粉丝点击