黑马程序员技术交流社区

标题: 【广州校区】【原创】javascript实现全选 [打印本页]

作者: wuwei丶 时间: 2019-9-19 16:33
标题: 【广州校区】【原创】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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2