javascript实现全选

<!DOCTYPE html>
<html><head>
<meta charset=" utf-8">
<title>Demo</title>
<script type="text/javascript">
window.onload=function(){
  var box=document.getElementById("box");
  var flag=document.getElementById("flag");
  var checkAll=document.getElementById("checkAll");
  checks=box.getElementsByTagName("input");
  checkAll.onclick=function(){
    if(this.checked){
      for(var i=0;i<checks.length;i++){
        checks[i].checked=true;
      }
      flag.innerHTML="取消";
    }else{
      for(var i=0;i<checks.length;i++){
        checks[i].checked = false;
      }
      flag.innerHTML="全选";
    }
  }
}
</script> 
</head> 
<body >
<ul id="box">
  <li><input type="checkbox">一</li>
  <li><input type="checkbox">二</li>
  <li><input type="checkbox">三</li>
  <li><input type="checkbox">四</li>
</ul>
<input type="checkbox" id="checkAll"><span id="flag">全选</span> 
</body> 
</html>

更多免费技术资料可关注：annalin1203

posted @ 2020-05-07 09:19  幽暗森林之猪大屁  阅读(149)  评论(0)    收藏  举报