Javascript 全选反选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title></title>
</head>
<body>
 
 <table id="mytable">
  <tr>
   <td>选中</td>
   <td>编号</td>
   <td>姓名</td>
   <td>空白</td>
  </tr>
  <tr>
   <td><input type="checkbox" /></td>
   <td>2</td>
   <td>张三</td>
   <td><input type="" /></td>
  </tr>
  <tr>
   <td><input type="checkbox" /></td>
   <td>3</td>
   <td>李四</td>
   <td><input type="" /></td>
  </tr>
  <tr>
   <td><input type="checkbox" /></td>
   <td>5</td>
   <td>王五</td>
   <td><input type="" /></td>
  </tr> 
 </table>
 
  <input type="checkbox" onclick="check(this)"/>全选
  <input type="checkbox"  onclick="fanxuan();return false"/>反选
  <!-- 在这里加return fasle是让其自己的按钮一真不被选中 -->
 <script type="text/javascript">
  
  var checks=document.getElementById("mytable").getElementsByTagName("input");
   
  function  check(obj){
   //判断自己是否被选中 
   //alert(obj.checked);
   //如果当自己选中的时候,则全部选中
    //alert(checks.length);
   for(var i=0;i<checks.length;i++){
    if(checks[i].type=="checkbox"){
     checks[i].checked=obj.checked;
     //等于全选的状态
     //或者用
     //checks[i].checked=true;是让他自己选中
    }
   }
  }
  
  function fanxuan(){
   for(var i=0;i<checks.length;i++){
    
    if(checks[i].type=="checkbox"){
     checks[i].checked=!checks[i].checked;
    }
   }
  }
  
 </script>
</body>
</html>

posted @ 2013-06-06 23:35  午时的海  阅读(120)  评论(0编辑  收藏  举报