JavaScript随笔

来源：互联网发布：网络利大于弊的提问词编辑：程序博客网时间：2024/05/01 15:52

最近项目比较清闲，学习了一下JavaScript方便以后自己使用，使用JS实现单选、多选、反选、全不选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Js例子2</title>
</head>
<body>
<br>
  <input type="checkbox" name="checkItmes" id="checkItems">全选/全不选<br/>
  <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="checkNo" value="全不选">
<input type="button" name="checkall" id="check_reven" value="反选">
</body>
<script type="text/javascript" >
//全选
document.getElementById("checkall").onclick=function(){
  var checkElements=document.getElementsByName("items");
  for(var i=0;i<checkElements.length;i++){
   var checkElement=checkElements[i];
   //method one:
   //checkElement.setAttribute("checked","checked");
   //method two:
   checkElement.checked="checked";
  }
};
//全不选
document.getElementById("checkNo").onclick=function(){
var checkElements=document.getElementsByName("items");
  for(var i=0;i<checkElements.length;i++){
   var checkElement=checkElements[i];
   //method one:
   checkElement.checked=null;
   //method two:
   //checkElement.setAttribute("checked",null);
  }
}
//反选
document.getElementById("check_reven").onclick=function(){
  var checkedElements=document.getElementsByName("items");
  for(var i=0;i<checkedElements.length;i++){
   //从数组中把每一个得出来
   var checkElement=checkedElements[i];
   //判断是否被选中
   if(checkElement.checked){
    checkElement.checked=null;
   }else{
    checkElement.checked="checked";
   }
  }

}
//全选/全不选
document.getElementById("checkItems").onclick=function(){
  var checkedElements=document.getElementsByName("items");
  if(this.checked){
   for(var i=0;i<checkedElements.length;i++){
    var checkedElement=checkedElements[i];
    checkedElement.checked="checked";
   }
  }else{
   for(var i=0;i<checkedElements.length;i++){
    var checkedElement=checkedElements[i];
    checkedElement.checked=null;
   }
  }
}
</script>
</html>

这个小Demo还存在着小bug，比如:当选择“全选/全不选”之后再选择"反选" 上面的checkbox不会消失。