js全选，全部选，反选

最新推荐文章于 2021-03-10 10:44:16 发布

我爱荤菜

最新推荐文章于 2021-03-10 10:44:16 发布

阅读量1k

点赞数

文章标签： input function button null html jquery

声明：本文摘自网络

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Untitled Document</title>
</head>
<body>
  <form method="post" action="">
     你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选
     <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" id="CheckedAll" value="全　选"/>
      <input type="button" id="CheckedNo" value="全不选"/>
      <input type="button" id="CheckedRev" value="反　选"/>

   <input type="button" id="send" value="提　交"/>
  </form>
</body>
<script type="text/javascript">
  //全选: 为每一个 items 添加 checked="true" 属性值.
  var checkAllButton = document.getElementById("CheckedAll");

  checkAllButton.onclick = function(){
   var items = document.getElementsByName("items");
   for(var i = 0; i < items.length; i++){
    items[i].checked = "checked";
   }
  };

  //全不选: 设置 checked = null;
  var checkNoButton = document.getElementById("CheckedNo");

  checkNoButton.onclick = function(){
   var items = document.getElementsByName("items");
   for(var i = 0; i < items.length; i++){
    items[i].checked = null;
   }
  };

  //反选: 选的设置 checked = null, 没选的设置 checked = "checked"
  var checkRevButton = document.getElementById("CheckedRev");

  checkRevButton.onclick = function(){
   var items = document.getElementsByName("items");
   for(var i = 0; i < items.length; i++){
    if(items[i].checked)
     items[i].checked = null;
    else
     items[i].checked = "checked";
   }
  };

  //反选: 选的设置 checked = null, 没选的设置 checked = "checked"
  var sendButton = document.getElementById("send");

  sendButton.onclick = function(){
   var items = document.getElementsByName("items");
   var str = "您选中的是: \n";
   for(var i = 0; i < items.length; i++){
    if(items[i].checked)
     str = str + items[i].value + "\n";
   }
   alert(str);
  };

  var checkedAll_2Button = document.getElementById("checkedAll_2");
  checkedAll_2Button.onclick = function(){
   var items = document.getElementsByName("items");
   if(this.checked){
    for(var i = 0; i < items.length; i++){
     items[i].checked = "checked";
    }
   }else{
    for(var i = 0; i < items.length; i++){
     items[i].checked = null;
    }
   }
  };

  var items = document.getElementsByName("items");
  var length = items.length;

  for(var i = 0; i < items.length; i++){
   items[i].onclick = function(){
    var checkedLength = 0;
    for (var i = 0; i < items.length; i++) {
     if(items[i].checked){
      checkedLength++;
     }
    }
    if(length == checkedLength){
     checkedAll_2Button.checked = "checked";
    } else{
     checkedAll_2Button.checked = null;
    }
   };
  }
</script>
</html>