JavaScript随笔

最新推荐文章于 2020-06-07 18:13:36 发布

confusion_ct

最新推荐文章于 2020-06-07 18:13:36 发布

阅读量380

点赞数

分类专栏： JavaScript随笔

本文链接：https://blog.csdn.net/confusion_ct/article/details/8612871

版权

JavaScript随笔专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近项目比较清闲，学习了一下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").οnclick=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").οnclick=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").οnclick=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").οnclick=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不会消失。

confusion_ct

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript随笔

最近项目比较清闲，学习了一下JavaScript方便以后自己使用，使用JS实现单选、多选、反选、全不选 http://www.w3.org/TR/html4/loose.dtd">Js例子2 全选/全不选足球蓝球游泳 //全选 document.getElementById("checkall
复制链接

扫一扫

专栏目录