javascript实现复选框的全选和恢复默认

  
  
  
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <HEAD>  
  4.    <TITLE>New Document</TITLE>  
  5.    <script language=javascript>   
  6. <!-- 全选 -->       
  7. function   checkAll(item)    
  8. {    
  9.       var   a   =   document.getElementsByName("power");    
  10.       for   (var   i=0;   i<a.length;   i++){    
  11.           a[i].checked   =   item.checked;    
  12.       }    
  13.      var temp=document.getElementsByName("default");  
  14.      temp[0].checked=false;     
  15. }  
  16. <!-- 恢复默认 -->  
  17. function setDefault(item){  
  18. var   a   =   document.getElementsByName("power");    
  19.       for   (var   i=0;   i<a.length;   i++){    
  20.           a[i].checked   =false;    
  21.       }  
  22.       a[0].checked   =   item.checked;  
  23.       a[1].checked   =   item.checked;  
  24.       a[2].checked   =   item.checked;  
  25.       a[3].checked   =   item.checked;  
  26.       a[4].checked   =   item.checked;  
  27.       a[5].checked   =   item.checked;  
  28.       a[6].checked   =   item.checked;  
  29.       a[7].checked   =   item.checked;  
  30.       a[8].checked   =   item.checked;  
  31.        
  32.       var temp=document.getElementsByName("all")  
  33.       temp[0].checked=false;  
  34. }  
  35. </script>  
  36. </HEAD>  
  37. <BODY>  
  38.    <form name="pageSetForm">  
  39.     <table width="80%" border="1" align="center" cellpadding="0" 
  40.      bordercolor="#8AB78A" cellspacing="0">  
  41.      <tr>  
  42.       <td>  
  43.        <input type="checkbox" name="power" value="1">  
  44.        教师姓名  
  45.       </td>  
  46.       <td>  
  47.        <input type="checkbox" name="power" value="2">  
  48.        性别  
  49.       </td>  
  50.       <td>  
  51.        <input type="checkbox" name="power" value="4">  
  52.        出生日期  
  53.       </td>  
  54.       <td>  
  55.        <input type="checkbox" name="power" value="8">  
  56.        学历  
  57.       </td>  
  58.      </tr>  
  59.      <tr>  
  60.       <td>  
  61.        <input type="checkbox" name="power" value="16">  
  62.        职称  
  63.       </td>  
  64.       <td>  
  65.        <input type="checkbox" name="power" value="32">  
  66.        手机电话  
  67.       </td>  
  68.       <td>  
  69.        <input type="checkbox" name="power" value="64">  
  70.        座机电话  
  71.       </td>  
  72.       <td>  
  73.        <input type="checkbox" name="power" value="128">  
  74.        工作单位  
  75.       </td>  
  76.      </tr>  
  77.      <tr>  
  78.       <td>  
  79.        <input type="checkbox" name="power" value="256">  
  80.        部门  
  81.       </td>  
  82.       <td>  
  83.        <input type="checkbox" name="power" value="512">  
  84.        是否为本校教师  
  85.       </td>  
  86.       <td>  
  87.        <input type="checkbox" name="power" value="1024">  
  88.        毕业时间  
  89.       </td>  
  90.       <td>  
  91.       <input type="checkbox" name="power" value="2048">  
  92.        政治面貌  
  93.       </td>  
  94.      </tr>  
  95.      <tr>  
  96.       <td>  
  97.        <input type="checkbox" name="power" value="4096">  
  98.        婚否  
  99.       </td>  
  100.       <td>  
  101.        <input type="checkbox" name="power" value="8192">  
  102.        开始工作时间  
  103.       </td>  
  104.       <td>  
  105.        <input type="checkbox" name="power" value="16384">  
  106.        毕业学校  
  107.       </td>  
  108.       <td>  
  109.        <input type="checkbox" name="power" value="32768">  
  110.        所学专业  
  111.       </td>  
  112.      </tr>  
  113.      <tr>  
  114.       <td>  
  115.        <input type="checkbox" name="power" value="65536">  
  116.        籍贯  
  117.       </td>  
  118.       <td>  
  119.        <input type="checkbox" name="power" value="131072">  
  120.        照片  
  121.       </td>  
  122.       <td>  
  123.        <input type="checkbox" name="power" value="262144">  
  124.        学位  
  125.       </td>  
  126.       <td>  
  127.        <input type="checkbox" name="power" value="524288">  
  128.        Email  
  129.       </td>  
  130.      </tr>  
  131.     </table>  
  132.     <br>  
  133.     <input type="checkbox" onclick="setDefault(this)" name="all" 
  134.      value="恢复默认">  
  135.     恢复默认  
  136.     <input type="checkbox" onclick="checkAll(this)" name="all" value="全选">  
  137.     全选  
  138.    </form>  
  139. </BODY>  
  140. </HTML> 

 

你可能感兴趣的:(JavaScript,实现,全选,复选框,恢复默认)