abstract:<!DOCTYPE html><html><head> <title>全选</title> <style type="text/css"> .box{width:120px;heiht:250px;border:1px solid #000;border-radius: 5px;padding:5px 10
<!DOCTYPE html>
<html>
<head>
<title>全选</title>
<style type="text/css">
.box{width:120px;heiht:250px;border:1px solid #000;border-radius: 5px;padding:5px 10px;margin:20px auto;}
.box div{border-bottom:1px solid #000;padding-bottom:10px;margin-bottom:8px;}
.box input{margin:8px;}
</style>
<script type="text/javascript">
function checkAll(){
var checkall,item,i=0;
checkall=document.getElementById('checkall')//获取全选
item=document.getElementsByName("item[]")//获取下面的勾选框
//alert(111)
//var s=item[].length
while(i<item.length){
//alert(111)
//document.write(i)
if(checkall.checked){
item[i].checked=true;//当全选被选中,下边勾选框被选中
}else{
item[i].checked=false;
}
i++;
}
}
</script>
</head>
<body>
<div class="box">
<div><input type="checkbox" id="checkall" onclick="checkAll()"><label for="checkall">全选</label></div>
<input type="checkbox" name="item[]">选项1<br/>
<input type="checkbox" name="item[]">选项2<br/>
<input type="checkbox" name="item[]">选项3<br/>
<input type="checkbox" name="item[]">选项4<br/>
<input type="checkbox" name="item[]">选项5<br/>
<input type="checkbox" name="item[]">选项6<br/>
</div>
</body>
</html>
刚开始把i++放错地方了结果造成下边的选矿少了一个,第二个少了一个括号,出现错误,习惯写东西之前先alert()一下看看是否调用成功,要是再多几个案例就好了
Correcting teacher:灭绝师太Correction time:2019-02-27 09:14:30
Teacher's summary:需要案例练习的话可以看下选修课中的前端案例大全,