03.HTML 4.X, HTML5, XML.../HTML/Css/Script

체크박스 4천개 체크 시간 비교...

1010 2008. 7. 11. 18:01
반응형

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language='JavaScript'>
function checkAall(oElement){
 var newtime = new Date().getTime(); 
 for(var i=0;i<document.form1.chkA.length;i++){
  document.form1.chkA[i].checked = oElement.checked;
 }
 var newtime2 = new Date().getTime();

 td1.innerHTML="걸린시간 : "+(newtime2-newtime);
}

function checkBall(oElement){
 var newtime = new Date().getTime();

 var len = document.form1.chkB.length;
 for(var i=0;i<len;i++){
  document.form1.chkB[i].checked = oElement.checked;
 }

 var newtime2 = new Date().getTime();

 td2.innerHTML="걸린시간 : "+(newtime2-newtime);
}


function checkCall(oElement){
 var newtime = new Date().getTime();

 var len = document.form1.chkC.length;
 var chkArr = document.form1.chkC;
 var boolv =  oElement.checked;

 for(var i=0;i<len;i++){
  chkArr[i].checked = boolv;
 }

 var newtime2 = new Date().getTime();

 td3.innerHTML="걸린시간 : "+(newtime2-newtime);
}
</script>
</HEAD>
<BODY>
 <form name='form1'>
  <table border='1' width='700'>
   <tr>
    <td><input type='checkbox' id='chkAall' onclick='checkAall(this)'>전체 체크/해제</td>
    <td><input type='checkbox' id='chkBall' onclick='checkBall(this)'>전체 체크/해제</td>
    <td><input type='checkbox' id='chkCall' onclick='checkCall(this)'>전체 체크/해제</td>
   </tr>
   <tr>
    <td>
     <div id="divA" style="overflow-x: hidden; overflow-y: auto; width:100%; height:200; padding: 0px; border: 1;">  <script language='JavaScript'>
       for(var i=0;i<2000;i++){
        document.write("<input type='checkbox' id='chkA' value='"+i+"'>A의 "+i+" 번째 체크박스<br>")
       }
      </script>
     <div>
    </td>
    <td>
     <div id="divB" style="overflow-x: hidden; overflow-y: auto; width:100%; height:200; padding: 0px; border: 1;">  <script language='JavaScript'>
       for(var i=0;i<2000;i++){
        document.write("<input type='checkbox' id='chkB' value='"+i+"'>B의 "+i+"번째 체크박스<br>")
       }
      </script>
     <div>    
    </td>
    <td>
     <div id="divC" style="overflow-x: hidden; overflow-y: auto; width:100%; height:200; padding: 0px; border: 1;">  <script language='JavaScript'>
       for(var i=0;i<2000;i++){
        document.write("<input type='checkbox' id='chkC' value='"+i+"'>C의 "+i+"번째 체크박스<br>")
       }
      </script>
     <div>    
    </td>
   </tr>
   <tr>
    <td id='td1'>&nbsp;</td>
    <td id='td2'>&nbsp;</td>
    <td id='td3'>&nbsp;</td>
   </tr>
  <table>
 </form>
</BODY>
</HTML>