js 全选 光棒效果

  1. <html>
  3. <head>
  5. <title></title>
  6. <script language="javascript" type="text/javascript">
  7.     function SelectAll(obj)
  8.     {
  9.         var tables = obj.parentElement.parentElement.parentElement;
  10.         for(i=2;i<tables.rows.length;i++)
  11.         {
  12.             var items = tables.rows.cells[0].getElementsByTagName("input");
  13.             if(obj.checked)
  14.             {
  15.                 items[0].checked=true;
  16.             }
  17.             else
  18.             {
  19.                 items[0].checked=false;
  20.             }
  21.         }
  22.     }
  23.    
  24.     function ReSelect(obj)
  25.     {
  26.         var tables = obj.parentElement.parentElement.parentElement;
  27.         var selectAll=tables.rows[0].cells[0].getElementsByTagName("input");
  28.         for(i=2;i<tables.rows.length;i++)
  29.         {
  30.             var items = tables.rows.cells[0].getElementsByTagName("input");
  31.             if(items[0].checked==false)
  32.             {
  33.                 selectAll[0].checked=false;
  34.                 return;
  35.             }
  36.         }
  37.         selectAll[0].checked=true;
  38.     }
  39.     var currentColor;
  40.     function Light(obj,eventName)
  41.     {
  42.         if(eventName=="onMouseOver")
  43.         {
  44.             currentColor=obj.style.backgroundColor;
  45.             obj.style.backgroundColor="green";
  46.             obj.style.cursor="hand";
  47.         }
  48.         else
  49.         {
  50.             obj.style.backgroundColor=currentColor;
  51.         }
  52.     }
  54. </script>
  55. </head>
  57. <body>
  58.     <table>
  59.         <tr>
  60.             <td><input type="checkbox" value="Select ALL" onclick="SelectAll(this)">Select All</td>
  61.         </tr>
  62.         <tr>
  63.             <td><hr></td>
  64.         </tr>
  65.         <tr onmouseover="Light(this,'onMouseOver')" onmouseout="Light(this,'onMouseOut')">
  66.             <td><input type="checkbox" value="Item 1" onclick="ReSelect(this);">Item 1</td>
  67.         </tr>
  68.         <tr onmouseover="Light(this,'onMouseOver')" onmouseout="Light(this,'onMouseOut')">
  69.             <td><input type="checkbox" value="Item 2" onclick="ReSelect(this);">Item 2</td>
  70.         </tr>
  71.         <tr onmouseover="Light(this,'onMouseOver')" onmouseout="Light(this,'onMouseOut')">
  72.             <td><input type="checkbox" value="Item 3" onclick="ReSelect(this);">Item 3</td>
  73.         </tr>
  74.     </table>
  75. </body>
  77. </html>
posted @ 2009-12-18 10:06  风w  阅读(1146)  评论(1)  编辑  收藏  举报