摘要：暂时还没能有什么总结与理解，跟着老师做出了效果<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>
暂时还没能有什么总结与理解，跟着老师做出了效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style >
.boxs{
width: 90px;
height: 230px;
/* background-color: blueviolet; */
border:1px solid #999;
border-radius:5px;
padding: 5px 10px;
margin: 10px auto;
}
.boxs input{
margin: 5px 5px;
}
.boxs div{
border-bottom: 1px solid #999;
padding: 5px 0px;
margin-bottom: 5px;
}
</style>
<script type="text/javascript">
function checkall(){
var checkall,item;
checkall = document.getElementById('checkall');
item = document.getElementsByName('item[]');
for(var i=0;i<=item.length;i++){
if(checkall.checked){
item[i].checked=true;
}else{
item[i].checked=false;
}
}
}
</script>
</head>
<body>
<div class="boxs">
<div>
<input type="checkbox" id="checkall" onclick="checkall()" ><label for="checkall">全选</label>
</div>
<input type="checkbox" name="item[]" id=""><label>选项一</label><br/>
<input type="checkbox" name="item[]" id=""><label>选项二</label><br/>
<input type="checkbox" name="item[]" id=""><label>选项三</label><br/>
<input type="checkbox" name="item[]" id=""><label>选项四</label><br/>
<input type="checkbox" name="item[]" id=""><label>选项六</label><br/>
<input type="checkbox" name="item[]" id=""><label>选项五</label><br/>
<input type="checkbox" name="item[]" id=""><label>选项七</label><br/>
<input type="checkbox" name="item[]" id=""><label>选项八</label>
</div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-01-27 09:11:40
老师总结：全选 , 了解原理, 就好做了, 重点在于checkbox的name属性上
