`

复选框全选全不选

 
阅读更多
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <title>全选与反选</title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  6. <script language="javascript">  
  7. // --列头全选框被单击---  
  8. function ChkAllClick(sonName, cbAllId){  
  9.     var arrSon = document.getElementsByName(sonName);  
  10.  var cbAll = document.getElementById(cbAllId);  
  11.  var tempState=cbAll.checked;  
  12.  for(i=0;i<arrSon.length;i++) {  
  13.   if(arrSon[i].checked!=tempState)  
  14.            arrSon[i].click();  
  15.  }  
  16. }  
  17.   
  18. // --子项复选框被单击---  
  19. function ChkSonClick(sonName, cbAllId) {  
  20.  var arrSon = document.getElementsByName(sonName);  
  21.  var cbAll = document.getElementById(cbAllId);  
  22.  for(var i=0; i<arrSon.length; i++) {  
  23.      if(!arrSon[i].checked) {  
  24.      cbAll.checked = false;  
  25.      return;  
  26.      }  
  27.  }  
  28.  cbAll.checked = true;  
  29. }  
  30.   
  31. // --反选被单击---  
  32. function ChkOppClick(sonName){  
  33.  var arrSon = document.getElementsByName(sonName);  
  34.  for(i=0;i<arrSon.length;i++) {  
  35.   arrSon[i].click();  
  36.  }  
  37. }  
  38. </script>  
  39. </head>  
  40.   
  41. <body>  
  42. <form name="form1" method="post" action="">  
  43. <table width="500" border="1">  
  44.   <tr bgcolor="#FFFF66">  
  45.     <td>  
  46.       <INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td>  
  47.     <td align="center">复选框全选示例 </td>  
  48.     <td> </td>  
  49.     <td> </td>  
  50.   </tr>  
  51.   <tr>  
  52.     <td><INPUT name="chkSon" id="chkSon1" type="checkbox"  value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</td>  
  53.     <td> 作用： </td>  
  54.     <td> </td>  
  55.     <td> </td>  
  56.   </tr>  
  57.   <tr>  
  58.     <td><INPUT name="chkSon" id="chkSon2" type="checkbox"  value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</td>  
  59.     <td> a.单击列头复选框全选或全不选子项 </td>  
  60.     <td> </td>  
  61.     <td> </td>  
  62.   </tr>  
  63.   <tr>  
  64.     <td><INPUT name="chkSon" id="chkSon3" type="checkbox"  value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</td>  
  65.     <td> b.只要有一个子项没有选中，则取消列头的选中状态 </td>  
  66.     <td> </td>  
  67.     <td> </td>  
  68.   </tr>  
  69.   <tr>  
  70.     <td><INPUT name="chkSon" id="chkSon4" type="checkbox"  value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</td>  
  71.     <td> c.当所有子项目选中时，列头复选框自动置为选中状态 </td>  
  72.     <td> </td>  
  73.     <td> </td>  
  74.   </tr>  
  75.   <tr>  
  76.     <td><INPUT name="chkSon" id="chkSon5" type="checkbox"  value='5' onclick="ChkSonClick('chkSon','chkAll')" />5</td>  
  77.     <td> </td>  
  78.     <td> </td>  
  79.     <td> </td>  
  80.   </tr>  
  81.   <tr>  
  82.     <td><INPUT name="chkSon" id="chkSon6" type="checkbox"  value='6' onclick="ChkSonClick('chkSon','chkAll')" />6</td>  
  83.     <td> </td>  
  84.     <td> </td>  
  85.     <td> </td>  
  86.   </tr>  
  87.   <tr>  
  88.     <td><INPUT name="chkSon" id="chkSon7" type="checkbox"  value='7' onclick="ChkSonClick('chkSon','chkAll')" />7</td>  
  89.     <td> </td>  
  90.     <td> </td>  
  91.     <td> </td>  
  92.   </tr>  
  93.   <tr>  
  94.     <td><INPUT name="chkSon" id="chkSon8" type="checkbox"  value='8' onclick="ChkSonClick('chkSon','chkAll')" />8</td>  
  95.     <td> </td>  
  96.     <td> </td>  
  97.     <td> </td>  
  98.   </tr>  
  99.   <tr>  
  100.     <td><INPUT name="chkSon" id="chkSon9" type="checkbox"  value='9' onclick="ChkSonClick('chkSon','chkAll')" />9</td>  
  101.     <td> </td>  
  102.     <td> </td>  
  103.     <td> </td>  
  104.   </tr>  
  105.   <tr>  
  106.     <td><INPUT name="chkSon" id="chkSon10" type="checkbox"  value='10' onclick="ChkSonClick('chkSon','chkAll')" />10</td>  
  107.     <td>d.将复选框反过来选</td>  
  108.     <td> </td>  
  109.     <td> </td>  
  110.   </tr>  
  111.   <tr bgcolor="#66FFFF">  
  112.     <td><INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td>  
  113.     <td align="center">反选示例</td>  
  114.     <td> </td>  
  115.     <td> </td>  
  116.   </tr>  
  117. </table>  
  118. </form>  
  119. </body>  
  120. </html>  
分享到：
| web服务器访问流程
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics