`
welcome66
  • 浏览: 396538 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

checkbox 多选框 :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>  
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics