JavaScript实现的全选、全不选和反选的代码

 

//例一

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script>


function sel_all(flag){
  //定义标记,
  var isSel=false;
  //获取所有的name="aihao" 复选框
  var inputobj = document.getElementsByName("aihao");
   //根据flag判断用户当前要进行什么操作,flag =1 表示全选 flag=0 全不选
   if(flag){
  isSel=true;
   }
   //遍历所有的checkbox 设置值
   for(var i=0;i<inputobj.length;i++){
  inputobj[i].checked =isSel;
   }
}
//实现反选
function sel_fanxuan(){
//获取所有的对象
var inputobj = document.getElementsByName("aihao");
//遍历设置对象的属性,checked属性
for(var i=0;i<inputobj.length;i++){
  //做一个判断,判断当前是否被选中
  if(inputobj[i].checked){
     inputobj[i].checked =false;
  }else{
 inputobj[i].checked =true;
  }
  }
}
</script>
</head>
<body>

<input type="checkbox" name="aihao" value="吃包子" />吃包子<br>
<input type="checkbox" name="aihao" value="女" />女<br>
<input type="checkbox" name="aihao" value="男" />男<br>
<input type="checkbox" name="aihao" value="逛街" />逛街<br>
<input type="checkbox" name="aihao" value="打游戏" />打游戏<br>
<input type="checkbox" name="aihao" value="睡觉" />睡觉<br>

<input type ="button" onclick="sel_all(1)" value="全选" />
<input type ="button" onclick="sel_all(0)" value="全不选" />
<input type ="button" onclick="sel_fanxuan()" value="反选" />
</body>
</html>

//例二

/*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>check.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
 
  <body><br>
   您的爱好很广泛!!!
  <br>
    <input type="checkbox" name="items" value="足球"  />足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="游泳"/>游泳
  <input type="checkbox" name="items" value="唱歌"/>唱歌
  <br>
  <input type="button" name="checkall" id="checkall" value="全选" />
  <input type="button" name="checkall" id="checkallNo" value="全不选" />
  <input type="button" name="checkall" id="check_revsern" value="反选" />
  </body>
  <script language="JavaScript">
 window.onload=function(){
     //全选
  document.getElementById("checkall").onclick=function(){
   var itemElements=document.getElementsByName("items");
   for(var i=0;i<itemElements.length;i++)
   {
    itemElements[i].checked="checked";
   }
  }
  //全不选
  document.getElementById("checkallNo").onclick=function(){
   var itemElements=document.getElementsByName("items");
   for(var i=0;i<itemElements.length;i++)
   {
    itemElements[i].checked=null;
   }
  }  
  //反选
  document.getElementById("check_revsern").onclick=function(){
   var itemElements=document.getElementsByName("items");
   for(var i=0;i<itemElements.length;i++)
   {
    var itemElement=itemElements[i];
    if(itemElement.checked){
     itemElements[i].checked=null;
    }else{
     itemElements[i].checked="checked";
    }
   }
  }
 }
  </script>
</html>

*/

 /*

1利用 setAttribute("checked", "checked"); 实现选中,    
             setAttribute("checked",null); 实现不被选中
2也可以利用
     document.getElementById("checkedAll_2").checked = "checked";
     实现选中,
3利用 document.getElementById("checkedAll_2").checked = null; 实现不被选中

*/

你可能感兴趣的:(JavaScript,全选,反选,全不选)