诀别用DOM方法和函数方法做的复选框

分别用DOM方法和函数方法做的复选框DOMhtmlhead/headbodytabletrtdinput typecheckbox

分别用DOM方法和函数方法做的复选框

DOM



<html>
<head>


</head>


<body>
<table>
<tr><td><input type='checkbox' id='check1'></td><td>发票</td><td>2013-2-13</td></tr>
<tr><td><input type='checkbox' id='check2'></td><td>旅馆</td><td>2013-2-13</td></tr>
<tr><td><input type='checkbox' id='check3'></td><td>要饭</td><td>2013-2-13</td></tr>
<tr><td><input type='button' id='' value='全选' onclick='selectAll()'/></td><td><input type='button' id='' value='反选' onclick='reverse()'/></td><td><input type='button' id='' value='全不选' onclick='selectNo()'/></td></tr>
</table>
</body>


<script>
   function selectAll(){
     var inpu = document.getElementsByTagName('input');
     for(var i=0;i<3;i++){
           inpu[i].checked = true;
     }
   }
   function selectNo(){
     var inpu = document.getElementsByTagName('input');
     for(var i=0;i<3;i++){
           inpu[i].checked = false;
     }
   }
   function reverse(){
     var inpu = document.getElementsByTagName('input');
     for(var i=0;i<3;i++){
           if(inpu[i].checked == false){
    inpu[i].checked = true;
  }else{
    inpu[i].checked = false;
  }
     }
   }
</script>
</html>


函数


<html>
<head>


</head>


<body>
<table>
<tr><td><input type='checkbox' id='check1'></td><td>发票</td><td>2013-2-13</td></tr>
<tr><td><input type='checkbox' id='check2'></td><td>旅馆</td><td>2013-2-13</td></tr>
<tr><td><input type='checkbox' id='check3'></td><td>要饭</td><td>2013-2-13</td></tr>
<tr><td><input type='button' id='' value='全选' onclick='selectAll()'/></td><td><input type='button' id='' value='反选' onclick='reverse()'/></td><td><input type='button' id='' value='全不选' onclick='selectNo()'/></td></tr>
</table>
</body>


<script>
   function selectAll(){
     for(var i=1;i<4;i++){
   document.getElementById('check'+i).checked = true;
}
   }
   function selectNo(){
     for(var i=1;i<4;i++){
   document.getElementById('check'+i).checked = false;
}
   }
   function reverse(){
     for(var i=1;i<4;i++){
  if(document.getElementById('check'+i).checked == false){
    document.getElementById('check'+i).checked = true;
  }else{
    document.getElementById('check'+i).checked = false;
  }
}
   }
</script>
</html>