jquery全选，jquery全不选,jquery反选
[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>全选，不全选，反选</title>  
  5.     <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>  
  6.     <script language="javascript" type="text/javascript">  
  7.         $(function () {  
  8.             $("#selectAll").click(function () {//全选  
  9.                 $("#playList :checkbox").attr("checked", true);  
  10.             });  
  11.   
  12.             $("#unSelect").click(function () {//全不选  
  13.                 $("#playList :checkbox").attr("checked", false);  
  14.             });  
  15.   
  16.             $("#reverse").click(function () {//反选  
  17.                 $("#playList :checkbox").each(function () {  
  18.                     $(this).attr("checked", !$(this).attr("checked"));  
  19.                 });  
  20.             });  
  21.         });  
  22.     </script>  
  23. </head>  
  24. <body>  
  25.     <div id="playList">  
  26.         <input type="checkbox" value="歌曲1" />歌曲1<br />  
  27.         <input type="checkbox" value="歌曲2" />歌曲2<br />  
  28.         <input type="checkbox" value="歌曲3" />歌曲3<br />  
  29.         <input type="checkbox" value="歌曲4" />歌曲4<br />  
  30.         <input type="checkbox" value="歌曲5" />歌曲5<br />  
  31.         <input type="checkbox" value="歌曲6" />歌曲6  
  32.     </div>  
  33.     <input type="button" value="全选" id="selectAll" />  
  34.     <input type="button" value="全不选" id="unSelect" />  
  35.     <input type="button" value="反选" id="reverse" />  
  36. </body>  
  37. </html>  
 posted on 2012-07-14 14:22  纳米程序员  阅读(129)  评论(0)  编辑  收藏  举报