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>